Angular Reactive Forms для сетки свойств

Question

Используя Angular 12, я хочу проверять и обнаруживать изменения в списке.

У меня есть сетка свойств (таблица пар ключ / значение, список свойств с редактируемыми значениями, но каждое значение может быть другого типа, string / boolean / int / и т. Д.).

Я хочу добавить проверку и обнаружение изменений для этой сетки свойств.

Проверка должна происходить для каждого элемента, а обнаружение изменений должно происходить только для списка в целом (не заботясь о том, какая строка / элемент была изменена).

Я построил что-то вроде этого:

      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, Я просто использовал список, поэтому имейте в виду, что я только начал заменять список формой.

В setting собственность была InnerSetting объект.

      <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>

---

Проблемы

Поскольку мне нужно отображать разные элементы в зависимости от типа настройки (логическое, строковое, число и т. Д.). Как я могу получить доступ к этой информации из?

Кроме того, как я могу привязаться к нестандартным элементам управления вводом, таким как мой div с contenteditable?

---

Редактировать

Я заметил, что formArray.controls это массив FormGroup и что я могу получить доступ к значениям в this.formArray.controls[0].controls['name'].value.

Теперь проблема заключается в настройке этого элемента управления на поля (select, div или input) в зависимости от типа.

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;
  }
}

* Не забудьте добавить в модуль массив объявлений.

Полная демонстрация