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

Question

Hello I'm trying to set a default value input type radio inside a reactiveForm, which is a child component and it has a input from the parent but I couldn't set the value checked for the radio button the rest of my logic works but I couldn't set this input, what is wrong on my code? Also I couldn't set the status disable to the text input that come from the input

the input data in the html

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

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

Your input doesnt have a value which is what is being compared to the formControl value. So try adding the expected value:

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

Why are you using a radio button if you only have one possible choice, this seems like a perfect use case for a checkbox.

The radio button works like this:

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

A checkbox should check itself as long as you give it a boolean otherwise you can make it work the same way a radio would.