This is my .html file.
<div *ngFor="let q of questions">
<div class="row">
<div class="col-md-12 col-12">
<label>{{q.question}}</label>
</div>
<div class="col-md-12 col-12 q-row">
<div class="form-group" [ngClass]="{'has-error':!complexForm.controls['{{q.id}}'].valid && complexForm.controls['{{q.id}}'].touched}">
<input class="form-control" type="text" [formControl]="complexForm.controls['{{q.id}}']">
<div *ngIf="complexForm.controls['{{q.id}}'].hasError('required') && complexForm.controls['{{q.id}}'].touched" class="invalid">Please provide your name.</div>
</div>
</div>
</div>
</div>
the variable question can have any length and i am looping it here.I dont know how to write the form build to read the data after submission.please help me?Thanks in advance.
If you are using template driven approach you have to add ngModel to your input field in order to retrieve the data in your ts file. However this won't work since you'll have many input fields.
First you have to set up a reactive form approach in your ts file.
Then you need to get the index in your *ngFor. Each formControl will be named after this index with [formControlName]
<div
class="form-group"
*ngFor="let q of questions; let i = index">
<input type="text" name="question" class="form-control" [formControlName]="i">
</div>
But I'm assuming a lot here. It would help if you provide more info about your form and your ts file.
Related
I am new to Angular and trying to achieve this following situation.
lets say I have a form A in formA.html:
<div class="row">
<div class="col-sm-3">
<span class="col-sm-12">Statement1: </span>
</div>
<div class="col-sm-9">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label> Statements </mat-label>
<textarea spellcheck="true" matInput placeholder="" formControlName="case1" cols="100" rows="10"</textarea>
</mat-form-field>
</div>
</div>
and now I have formB in formB.html, and I want the comments field to be populated with the statement1 value from form A. how can I achieve this?
<div class="row">
<div class="col-sm-3">
<span class="col-sm-12">comments: </span>
</div>
<div class="col-sm-9">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label> comment# </mat-label>
<textarea spellcheck="true" matInput placeholder="" formControlName="comments" cols="100" rows="10"> this has to be the value thats in form A statement 1 field.</textarea>
</mat-form-field>
</div>
</div>
In Angular 1 Component should only have 1 html file. Which means there are other things to consinder in your questions like, how are those components related.
You are using reactive forms, so i will describe an example with reactive forms.
Im just going to consider, that you have 2 completly different components.
So what you would want to do in your first component (where the data is put in)
is that you listen to your valueChanges() of the form. Take that value and safe it into a Service, and get the data from your Service in your second component.
this.form.valueChanges.subscribe((data) => {
// some BehaviorSubject or Observable will get the data int
this.service.subject.next(data)...
})
The valueChanges Property exists on the whole form and on specific formControls.
In your second component you would subscribe to the subject and react to the value change.
this.service.subject.subscribe((data) => this.form.controls['somevalue']).setValue(data);
and thats it.
I'm playing around with template reference variables. And thought of using its value to set the disabled property on a button. i.e disable a button unless the input field is non-empty. I expected the following code to work but the button stays disabled even after some value is entered in the input.
Why does Angular change detection not work in this case?
Is there another way to do achieve this using ONLY template reference variables?
The code is written in Angular 8 and node 12.16.2
<div class="form-group col-md-6">
<input #hello type="text" class="form-control" id="01">
</div>
<div class="form-group col-md-6">
<button class="btn btn-primary" [disabled]="hello.value.length === 0">Deactivate</button>
</div>
You can try ngForm combined with ngModel directive to achieve this,
<form #testForm="ngForm">
<div class="form-group col-md-6">
<input type="text" name="hello" ngModel class="form-control" id="01">
</div>
<div class="form-group col-md-6">
<button class="btn btn-primary" [disabled]="testForm.value.hello.length === 0">
Deactivate
</button>
</div>
</form>
{{testForm.value|json}}
Demo : https://stackblitz.com/edit/angular-ivy-xtdm4k?file=src/app/app.component.html
For more details, see this.
Looking for something to take data from a form like this one:
<form id="rendered-form" name="rendered-form">
<div class="rendered-form">
<div class="fb-text form-group field-text-1534368808722">
<label class="fb-text-label" for="text-1534368808722">Name</label><input class="form-control" id="text-1534368808722" name="text-1534368808722" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Email</label><input class="form-control" id="text-1534368811041" name="text-1534368811041" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Link</label><input class="form-control" id="text-1534368811041" name="text-1534368811042" type="text">
</div>
</div>
</form>
And insert the data into a HTML template. For example:
<div class="name">FORM TEXT HERE</div>
<div class="email">FORM TEXT HERE</div>
link
I would love to use Vue.js for this if at all possible, I've been playing around with it and this seems like something it would be capable of.
I'm trying to use this to quickly make AMP pages (I know I could do it programmatically, but due to restrictions I cannot at this time). I don't want to have a database, it doesn't need to store this. I just want to be able to insert my data, press a button, and have it spit out HTML or an HTML file based on the template and provided data and be done.
If you already handled the form submit, you can change the content of your divs with js selectors, like this:
document.getElementsByClassName("name")[0].innerHTML = nameFromFormInput;
I am using ng-repeat for printing the HTML input element. I want to check that when I add new HTML input element it should not contain the same value as compared with the previous one.
This is my code.
<div class="row" ng-repeat="m in machines">
<div id="machinename_{{$index}}">
<input id="machinenameInput_{{$index}}" type="text" class="form-control" maxlength="20" ng-model="m.alias" required>
</div>
</div>
In the above code when i add new machine name it should not contain the same name.Thank you in advance
use ng-if to display the machine only if the previous machine has a different value
<div class="row" ng-repeat="m in machines">
<div ng-if="machines[$index-1] != machines[$index]" id="machinename_{{$index}}">
<input id="machinenameInput_{{$index}}" type="text" class="form-control" maxlength="20" ng-model="m.alias" required>
</div>
</div>
I am looking for some guidance.
Here is some code I have:
<div ng-repeat="q in questions">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><span ng-bind="q.questionText"></span></h3>
</div>
<div class="panel-body">
<answer-field question="q"></answer-field>
</div>
</div>
</div>
answer-field is a directive, and essentially depending on what q is a certain type of form field will be displayed like a select box or an input text box, etc.
For example, the select box might be:
<div class='form-group'>
<select class='form-control' ng-model='question.answer' ng-options='item for item in question.choices' required>
<option value=''>Select an option...</option>
</select>
</div>
And the text field might be:
<div class='form-group'>
<input class='form-control' type='text' ng-model='question.answer' required />
</div>
As you can see, I have added required and this does technically work. The browser will show an error saying I need to fill out that field if I try to submit.
What I would like though is something a little more aesthetically pleasing. Bootstrap has has-error for example. It would be nice if instead of the default browser "fill out this field" message if I could make the form-group display has-error - and ideally display somewhere a list of the items that do indeed have an error.
How can I go about this?
Angular has novalidate. It suppresses the native HTML validation, allowing you to put in your own. As for how to show custom errors, it's also in that page.
I often like to display custom error messages as follows:
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" ng-model="user.password" placeholder="Password" required>
</div>
<div class="form-group has-error">
<p class="help-block" ng-show="form.password.$error.required && submitted">
Please enter password.
</p>
</div>
or you can use ng-class to append the has-error class to the first div based on the expression