Как отключить динамическое управление в angular

Предположим, formService является экземпляром FormBuilder. При создании формы первым элементом массива является либо исходное значение, либо объект со свойствами value и disabled. Чтобы включить элемент управления после изменения значения inputType, вы можете подписаться на изменения значения и вызвать функцию enable() экземпляра элемента управления. Обновленный код:

createFieldsForm(): FormGroup {
  const formGroup = this.formService.group({
    "inputType": [null, Validators.required],
    "inputValues": [{ value: null, disabled: true }, Validators.required],
  });
  formGroup.inputType.valueChanges
    .pipe(take(1))
    .subscribe(() => formGroup.controls.inputValues.enable());
  return formGroup;
}

Мы можем использовать событие (change), чтобы получить группу форм и проверить, следует ли ее включить или отключить.

  dropdownChanged(index: number) {
    const formGroup = this.formInputfieldsForm.at(index);
    const values = formGroup.value;
    formGroup.get('inputValues')!.setValue(null);
    if (values.inputType === 'dropdown') {
      formGroup.get('inputValues')!.enable();
    } else {
      formGroup.get('inputValues')!.disable();
    }
  }

Мы можем использовать проверку троичного условия, если значение по умолчанию — раскрывающийся список и следует ли его включить/отключить.

  createForm(b?: any, c?: any): FormGroup {
    return this.fb.group({
      inputType: [b, Validators.required],
      inputValues: [
        b === 'dropdown' ? c : { value: c, disabled: true },
        Validators.required,
      ],
    });
  }

Полный код:

import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  imports: [CommonModule, ReactiveFormsModule],
  standalone: true,
  template: `
    <div *ngFor = "let expForm of getFields(); let i = index;" [formGroup] = "expForm">
        <select class = "hand_symbol" formControlName = "inputType"  placeholder = "Select Input Type" (change) = "dropdownChanged(i)">
          <option value = "">Select</option>
          <option value = "textbox">Textbox</option>
          <option value = "dropdown">Drop Down</option>
          <option value = "textarea">Textarea</option>
        </select>
        <input class = "form-control" formControlName = "inputValues" type = "text" placeholder = "Enter Values" type = "text">
    </div>
 
 
 
 <span title = "Add" (click) = "addFields()">add</span>
  `,
})
export class App {
  formInputfieldsForm: FormArray<any> = new FormArray<any>([]);
  fb = inject(FormBuilder);
  defaultFields: any = [
    { inputType: 'textbox', inputValues: '' },
    { inputType: 'textbox', inputValues: '' },
  ];

  getFields() {
    return this.formInputfieldsForm.controls as FormGroup[];
  }

  dropdownChanged(index: number) {
    const formGroup = this.formInputfieldsForm.at(index);
    const values = formGroup.value;
    formGroup.get('inputValues')!.setValue(null);
    if (values.inputType === 'dropdown') {
      formGroup.get('inputValues')!.enable();
    } else {
      formGroup.get('inputValues')!.disable();
    }
  }

  createForm(b?: any, c?: any): FormGroup {
    return this.fb.group({
      inputType: [b, Validators.required],
      inputValues: [
        b === 'dropdown' ? c : { value: c, disabled: true },
        Validators.required,
      ],
    });
  }

  ngOnInit() {
    this.addFieldsOnLoad();
  }

  addFieldsOnLoad() {
    this.defaultFields.forEach((ele: any, i: any) => {
      this.formInputfieldsForm.push(
        this.createForm(ele?.inputType, ele?.inputValues)
      );
    });
  }

  createFieldsForm(): FormGroup {
    return this.fb.group({
      inputType: [null, Validators.required],
      inputValues: [null, Validators.required],
    });
  }

  addFields() {
    this.formInputfieldsForm.push(this.createForm('', ''));
  }
}

bootstrapApplication(App);

Демо-версия Stackblitz