Angular 響應式 Forms 用於屬性網格

Question

使用 Angular 12，我想驗證和檢測列表中的更改。

我有一個屬性網格（一個鍵/值對表，列出具有可編輯值的屬性，但每個值可以是不同的類型，字符串/布爾值/整數/等）。

我想為該屬性網格添加驗證和更改檢測。

應該對每個項目進行驗證，並且只需要對整個列表進行更改檢測（不關心更改了哪一行/項目）。

我已經建立了這樣的東西：

export class InnerSetting {
  key!: string;
  displayName!: string;
  originalValue?: string;
  value?: string;
  type!: PropertyTypeEnum; //string | int | boolean | ...
  validation?: string;
  minValue?: number;
  maxValue?: number;
  isNullable!: boolean
}

constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      properties: new FormArray([])
    });
  }

  ngOnInit(): void {
    this.settings.forEach(item => this.formArray.push(this.formBuilder.group(
      {
        key: [item.key],
        type: [item.type],
        name: [item.displayName],
        value: [ item.value, [Validators.required, Validators.minLength(2)] ], //Depends on type and validation stuff, will be added later.
        originalValue: [ item.originalValue ]
      }
    )));

    //Not sure which of these will work, so added both for now.
    this.form.valueChanges.pipe(debounceTime(500)).subscribe(changes => {
      this.areChangesDetected = changes != null;
    });

    this.formArray.valueChanges.pipe(debounceTime(500)).subscribe(changes => {
      this.areChangesDetected = changes != null;
    });
  }

  get formArray() {
    return this.form.controls.properties as FormArray;
  }

在使用Form之前，我只是使用了一個InnerSetting列表，所以請記住，我只是開始用表單替換列表。

setting屬性是InnerSetting object。

<form [formGroup]="form" class="group-wrapper">
  <div class="d-flex item-row" *ngFor="let setting of formArray.controls; let i = index">
    <div class="item flex-fill d-flex" [ngSwitch]="setting.type" [formGroupName]="i">
      <span>{{setting.name}}</span>

      <select *ngSwitchCase="'boolean'" class="flex-grow-1" name="role" id="role-select" [(ngModel)]="setting.value">
        <option [value]="'0'">False</option>
        <option [value]="'1'">True</option>
      </select>

      <div contenteditable *ngSwitchDefault class="flex-grow-1" type="text" [id]="setting.key" [innerText]="setting.value"></div>
    </div>

    <button class="remove-relation" (click)="reset(setting)">
      <fa-icon [icon]="faUndo"></fa-icon>
    </button>
  </div>
</form>

---

問題

因為我需要根據設置類型（布爾值、字符串、數字等）顯示不同的元素。 我如何從formArray.controls訪問該信息？

另外，我如何綁定到非標准輸入控件，例如我的帶有contenteditable的div ？

---

編輯

我注意到formArray.controls是FormGroup的數組，我可以訪問this.formArray.controls[0].controls['name'].value中的值。

現在的問題是根據類型將該控件設置為字段（選擇或 div 或輸入）。

Answer 1

您的模板將如下所示

<form [formGroup]="form" class="group-wrapper">
  <div
    formArrayName="properties"
    class="d-flex item-row"
    *ngFor="let setting of settingFG; let i = index"
  >
    <div
      class="item flex-fill d-flex"
      [ngSwitch]="setting.get('type').value"
      [formGroupName]="i"
    >
      <!-- <span>{{ setting.get('name').value }}</span> -->

      <select
        *ngSwitchCase="'boolean'"
        class="flex-grow-1"
        name="role"
        id="role-select"
        formControlName="value"
      >
        ...
      </select>
      // custom div form control
      <div-control *ngSwitchDefault formControlName="value"></div-control>

    </div>

    <button class="remove-relation" (click)="reset(setting)">X</button>
  </div>
</form>

獲取 FormGroup 數組的輔助方法

 get settingFG(): FormGroup[] {
    return this.formArray.controls as FormGroup[];
  }

要將 FormControl 添加到 div，我們需要實現ControlValueAccessor

export const DIV_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DivController),
  multi: true,
};

@Component({
  selector: 'div-control',
  providers: [DIV_VALUE_ACCESSOR],
  template: `<div contenteditable #div (input)="changeText(div.innerText)" [textContent]="value"><div>`,
})
export class DivController implements ControlValueAccessor {
  value = '';
  disabled = false;
  private onTouched!: Function;
  private onChanged!: Function;

  changeText(text: string) {
    this.onTouched(); // <-- mark as touched
    this.value = text;
    this.onChanged(text); // <-- call function to let know of a change
  }
  writeValue(value: string): void {
    this.value = value ?? '';
  }
  registerOnChange(fn: any): void {
    this.onChanged = fn; // <-- save the function
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn; // <-- save the function
  }
  setDisabledState(isDisabled: boolean) {
    this.disabled = isDisabled;
  }
}

*不要忘記在模塊中添加聲明數組。

完整演示