Angular MaterializeCSS FormArray 選擇器

Question

我遇到了正在處理的表單問題。

我將 MaterializeCSS 與 Angular 一起使用，為了確保select將正確啟動，我使用以下方法：

ngAfterViewInit() {
   const selArray = this.select.toArray();
   selArray.forEach(el => {
      M.FormSelect.init(el.nativeElement);
   });
}

這很好，我的問題是我正在使用FormArray ，當我動態創建一個新的FormControl時， select不起作用。 就像它沒有初始化一樣。 我在addResident()方法中添加了上面的代碼，但它不起作用，但如果我必須再次添加，它就會起作用。

這是錯誤的視頻： https://youtu.be/v1CHkmJtzCo

這是代碼：

@ViewChildren('select') select: QueryList<ElementRef>;

ngAfterViewInit() {
        const selArray = this.select.toArray();
        selArray.forEach(el => {
            M.FormSelect.init(el.nativeElement);
        });
        const dpArray = this.datePicker.toArray();
        dpArray.forEach(element => {
            M.Datepicker.init(element.nativeElement);
        });
    }

addResident() {
   (this.hostForm.get('residents') as FormArray).push(
       new FormGroup({
           firstName: new FormControl(''),
           lastName: new FormControl(''),
           birthDate: new FormControl(''),
           action: new FormControl('Insert'),
           residentID: new FormControl(0),
           relationship: new FormControl('')
       })
   );
   const selArray = this.select.toArray();
   selArray.forEach(el => {
       M.FormSelect.init(el.nativeElement);
   });
}

Answer 1

我建議使用Angular Material來避免 MaterializeCSS 的問題。

https://material.angular.io/

Angular 的材料設計組件

Angular 材質： Forms

Angular 材料： Form-Field

查看表單字段示例：

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

  <mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
</div>