xxxxxxxxxx
this.personForm.addControl('nationality', this.formBuilder.control('', [Validators.required]));
xxxxxxxxxx
this.myForm.addControl('newControl', new FormControl('', Validators.required));
xxxxxxxxxx
public auditSearchForm: FormGroup;
this.auditSearchForm = this.builder.group({
mbi: new FormControl(''),
memberID: new FormControl(''),
// firstName: new FormControl(''),
// lastName: new FormControl(''),
fromDate: new FormControl(''),
fieldName: new FormControl(''),
toDate: new FormControl(''),
});
//.html
<form [formGroup]="auditSearchForm" class="flex-col">
<div class="grid grid-cols sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 mb-4">
<igx-input-group>
<input igxInput name="mbi" formControlName="mbi" type="text" />
<label igxLabel for="mbi">MBI</label>
</igx-input-group>
<igx-input-group>
<input igxInput name="memberID" formControlName="memberID" type="text" />
<label igxLabel for="memberID">Member ID</label>
</igx-input-group>
<igx-simple-combo class="input-container" [data]="trendLineTypes" name="fieldName"
formControlName="fieldName" [(ngModel)]="trendLineType" [type]="'border'">
<label igxLabel for="fieldName">Field Name</label>
</igx-simple-combo>
<igx-date-picker name="fromDate" formControlName="fromDate">
<label igxLabel>From Date</label>
<igx-picker-toggle igxSuffix>
<mat-icon [svgIcon]="'oxalis:icon_today_fill'"></mat-icon>
</igx-picker-toggle>
</igx-date-picker>
</div>
</form>
xxxxxxxxxx
this.myForm.addControl('newControl', new FormControl('', Validators.required));
xxxxxxxxxx
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'
xxxxxxxxxx
teamForm = this.formBuilder.group({
teamLead: this.formBuilder.group({
empName: ['', Validators.required],
age: ['', [Validators.required, Validators.min(18)]],
city: ['', Validators.required]
}),
------
});
<div formGroupName="teamLead" class="employee">
<b>Team Lead:</b>
<p>Name : <input formControlName="empName">
<label *ngIf="teamLead.get('empName')?.hasError('required')" class="error">
Name required. </label>
</p>
<p>Age : <input formControlName="age">
<label *ngIf="teamLead.get('age')?.hasError('required')" class="error">
Age required. </label>
<label *ngIf="teamLead.get('age')?.hasError('min')" class="error">
Minimum age is 18. </label>
</p>
<p>City : <input formControlName="city">
<label *ngIf="teamLead.get('city')?.hasError('required')" class="error">
City required. </label>
</p>
</div>
xxxxxxxxxx
(this.myForm.get("form_group_name") as FormGroup).addControl("item1", new FormControl("default val"));