Angular Formgroup Code Example

Example 1: formgroup addcontrol

let form: FormGroup = new FormGroup({}); form.addControl(field_name, new FormControl('', Validators.required));

Example 2: update formgroup value angular

To set all FormGroup values use, setValue:  this.myFormGroup.setValue({   formControlName1: myValue1,    formControlName2: myValue2 }); To set only some values, use patchValue:  this.myFormGroup.patchValue({   formControlName1: myValue1,    // formControlName2: myValue2 (can be omitted) });

Example 3: formgroup reset values

import {FormGroup} from '@angular/forms'; class XComponent {   form: FormGroup;   whateverMethod() {     //...reset     this.form.reset();   } }

Example 4: 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"> <!-- name --> <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>    <!-- contacts --> <div formGroupName="contacts"> 	<!-- email --> 	<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 5: 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'