找不到路径如下的控件:“项目-> 0->

时间:2019-04-08 17:19:02

标签: angular angular-reactive-forms reactive-forms formarray

`我有一个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))
    } 
  })
}

在此订阅中,我想在此处添加数据[****]

0 个答案:

没有答案