Updated to current Angular (v4.0.1)
FormGroupor FormBuilder. FormBuilderis just a short method for FormGroup. Therefore recommended for larger / more complex shapes.
, , , FormGroup, ngModel- #userForm="ngForm", , , - ... .
private myForm: FormGroup;
constructor(){
this.myForm = new FormGroup({
name: new FormGroup({
first: new FormControl('Nancy', Validators.required),
last: new FormControl('Drew')
}),
email: new FormControl('')
});
}
constructor(@Inject(FormBuilder) fb: FormBuilder) {
this.myForm = fb.group({
name: fb.group({
first: ['Nancy', Validators.required],
last: 'Drew',
}),
email: '',
});
}
:
<form [formGroup]="myForm" novalidate autocomplete="off">
<div formGroupName="name" novalidate autocomplete="off">
<input type="text" formControlName="first"/>
<input type="text" formControlName="last"/>
<span [hidden]="myForm.controls['name'].valid">Error</span>
</div>
<input type="text" formControlName="email"/>
</form>
Angular Driven Forms, [(ngModel)]="someInput"