reactive forms formgroup inside formgroup code example
Example 1: formgroup addcontrol
let form: FormGroup = new FormGroup({});
form.addControl(field_name, new FormControl('', Validators.required));
Example 2: angular add formgroup to formgroup
this.myForm = this.fb.group({
name: ['', [Validators.required]],
contacts: this.fb.group({
email: ['', [Validators.email]],
})
});
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<mat-grid-list cols="2" rowHeight="85px">
<mat-grid-tile>
<mat-form-field>
<input matInput type="text" formControlName="name">
<mat-error *ngIf="form.controls.name.hasError('required')">Name required</mat-error>
</mat-form-field>
</mat-grid-tile>
<div formGroupName="contacts">
<mat-grid-tile>
<mat-form-field>
<input matInput type="text" formControlName="email">
<mat-error *ngIf="form.get('contacts').get('email').hasError('required')">Email required</mat-error>
</mat-form-field>
</mat-grid-tile>
</div>
</form>
</mat-grid-list>
Example 3: formgroup angular
content_copy
const form = new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew'),
});
console.log(form.value); // {first: 'Nancy', last; 'Drew'}
console.log(form.status); // 'VALID'