Binding the template variable #contactForm appears to cause a name conflict and blow up the template processor as it tries to turn the attached template variable into an NgForm on the backend. Everywhere I have seen model driven forms used there is no template variable binding on the form, whereas there is a #tv=”ngForm” utilized … Read more
I solved it by also checking if the form was touched when displaying error messages. So, for example, the submit button looks like this <input type=”submit” class=”btn btn-default” [disabled]=”loginFormGroup.invalid && loginFormGroup.touched” />
Now, you don’t need to use FormBuilder and all this complicated valiation angular stuff. I put more details from this (Angular 2.0.8 – 3march2016): https://github.com/angular/angular/commit/38cb526 Example from repo : <input [ngControl]=”fullName” pattern=”[a-zA-Z ]*”> I test it and it works 🙂 – here is my code: <form (ngSubmit)=”onSubmit(room)” #roomForm=’ngForm’ > … <input id=’room-capacity’ type=”text” class=”form-control” [(ngModel)]=’room.capacity’ … Read more
There’s a pretty straightforward method to do this: markAsTouched. It should be enough to use it on the form group. this.addressForm.markAsTouched() In case you want for some reason to mark all controls manually, they itself have this method available. markAsTouched is a method of the AbstractControl all form elements inherit from. Out of curiosity, you … Read more
To expand on Radim Köhler answer. here is a shorter way of writing that function. getControlName(c: AbstractControl): string | null { const formGroup = c.parent.controls; return Object.keys(formGroup).find(name => c === formGroup[name]) || null; }
There should be a formControlName in your HTML form mapped to your component file. <div *ngFor=”let list_item of [0,1,2]; let i=index” class=”panel panel-default”> {{i + 1}}.) <input type=”text” formControlName=”{{i}}” placeholder=”List Item” class=”form-control”> </div> list_items: this.fb.array([ [”], //0 points to this [”], //1 points to this [”] //2 points to this ])
Remove the brackets from [formArrayName]=”areas” and use only formArrayName=”areas” This, because with [ ] you are trying to bind a variable, which this is not. Also notice your submit, it should be: (ngSubmit)=”onSubmit(areasForm.value)” instead of areasForm.values.
After my research & experiments I found one answer to my question, so answering it myself. If it saves someone’s time then I will be happy. If you want to create reactive forms with nested components then you can do as below Here I am creating a form with two nested components one for textbox … Read more
You can basically specify that the ngModel you are using is standalone. And use something like this <input type=”password” [(ngModel)] = “password” [ngModelOptions]=”{standalone: true}” />
In the parent component do this: <div [formGroup]=”form”> <div>Your parent controls here</div> <your-child-component [formGroup]=”form”></your-child-component> </div> And then in your child component you can get hold of that reference like so: export class YourChildComponent implements OnInit { public form: FormGroup; // Let Angular inject the control container constructor(private controlContainer: ControlContainer) { } ngOnInit() { // Set … Read more