`我有一个myFrom表单,其中有dtPickerControl和按钮控件。
在此按钮上,单击“我想使用表单数组动态生成按钮”。
我的表单模板:-`
<form [formGroup]="myForm" class="example-container">
<div class="example-button-row">
<button mat-raised-button color="primary" (click)="MTodayAvlblty()">Morning</button>
</div>
<mat-card>
<mat-form-field>
<input matInput formControlName="dtPickerControl" [min]="minDate" [matDatepicker]="dp3" id="dp3" placeholder="Input disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field>
</mat-card>
<mat-card *ngIf="userData">
<div
formArrayName="items"
*ngFor="let item of myForm.get('items').controls; let i = index;">
<div formGroupName="{{i}}">
`[****] I want to add below button`
<button mat-raised-button formControlName="{{i}}"
color="accent" (click)="ETodayAvlbltyy(i)">{{i}}</button>
</div>
</div>
</mat-card>
</form>
This is my component
myForm: FormGroup;
constructor(private _homeService: HomeService, private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
'dtPickerControl': [{ value: '', disabled: true }, [Validators.required]],
items: this.formBuilder.array([
this.formBuilder.control('', Validators.required),
])
})
}
MTodayAvlblty() {
this.BookingData('userId123', 'Morning');
}
private BookingData(userName: string, flag: string): void {
..subscribe(data => {
this.userData = data as userData[];
this.items = this.myForm.get('items') as FormArray;
for (let index = 0; index < this.userData.length; index++) {
(<FormArray>this.myForm.get('items')).push(this.formBuilder.control('',Validators.required))
}
})
}
在此订阅中,我想在此处添加数据[****]