如何在 formControl 中设置默认值，即 FormArray 中的 formGroup

Question

你好，我正在尝试在 reactiveForm 中设置一个默认值输入类型单选按钮，它是一个子组件，它有一个来自父组件的输入，但我无法为其余的单选按钮设置选中的值我的逻辑有效，但我无法设置此输入，我的代码有什么问题？此外，我无法将状态禁用设置为来自输入

的文本输入

输入数据 在html

[placeholder]="placeholder"
[items]="Phones"

在 ts

placeholder: string = 'Phone';
  Phones: phone[] = [
    {
      local_format: '4251234867',
      intl_format: '+584251234867',
      areaCode: '',
      countryCode: '',
      is_main: true,
    },
  ];

HTML

<form [formGroup]="itemsForm">
  <section formArrayName="array">
    <section
      class="form-group"
      *ngFor="let item of itemsArray.controls; let index = index"
    >
      <!-- form group -->
      <section formGroupName="{{ index }}" class="d-flex">
        <!-- is_main selector -->
        <input
          (change)="changeMain(index)"
          type="radio"
          formControlName="is_main"
          [checked]="nFromGroup(index).controls.is_main"
          class="form-control"
          [ngClass]="{
            'is-invalid': item.touched && !item.value
          }"
        />
        <!-- is_main selector -->

        <!-- item input -->
        <input
          type="text"
          formControlName="item"
          class="form-control"
          [ngClass]="{
            'is-invalid': item.touched && !item.value
          }"
        />
        <!-- item input -->
        <!-- btn delete begin-->
        <section *ngIf="isEditing.length > 0">
          <button
            *ngIf="item"
            (click)="deleteItem(index)"
            class="btn-delete-icon"
          >
            <span class="icon"> Delete </span>
          </button>
        </section>
        <!-- btn delete end-->
        <!-- form group -->
      </section>
      <!-- select reactive form -->
    </section>
  </section>
  <section>
    <button (click)="addItem()">ADD</button>
  </section>
</form>

TS

itemsForm = this.fb.group({});

  // create new formArray
  private _createFormArray(container: Item[]): FormGroup[] {
    return container
      ? container.map((item) => {
          return this.fb.group({
            item: item.item || '',
            is_main: item.is_main || false,
          });
        })
      : [
          this.fb.group({
            item: this.placeholder,
            is_main: false,
          }),
        ];
  }
  // create new formArray

  @Input() set items(container: any[]) {
    this.itemsContainer = [];
    // fill itemsContainer
    if (container[0].intl_format) {
      this.itemsContainer = container.map((item) => {
        return {
          item: item.intl_format,
          is_main: item.is_main,
        };
      });
    }

    // fill reactiveForm
    this.itemsForm = this.fb.group({
      array: this.fb.array(this._createFormArray(this.itemsContainer)),
    });
    // fill reactiveForm

    // generate edit array
    container.map((i) => {
      this.isEditing.push(false);
    });
    // generate edit array
  }

Answer 1

您的输入没有与 formControl 值进行比较的值。所以尝试添加期望值：

<input
      (change)="changeMain(index)"
      type="radio"
      [value]="true"
      formControlName="is_main"
      class="form-control"
      [ngClass]="{
        'is-invalid': item.touched && !item.value
      }"
    />

如果只有一个可能的选择，为什么要使用单选按钮，这似乎是复选框的完美用例。

单选按钮是这样工作的：

FormControl value=5
radio1 value=1 -> does 1===5 not checked
radio2 value=2 -> does 2===5 not checked
radio3 value=3 -> does 3===5 not checked

FormControl value=3
radio1 value=1 -> does 1===3 not checked
radio2 value=2 -> does 2===3 not checked
radio3 value=3 -> does 3===3 checked

只要你给它一个布尔值，复选框就应该检查自己，否则你可以让它像收音机一样工作。

如何在 formControl 中设置默认值，即 FormArray 中的 formGroup

How to set default value in a formControl that is i a formGroup inside a FormArray

angular

angular-reactive-forms