Start radiobutton with checked using Reactiveforms + Formarray

Question

Is there any way to start my radiobutton with checked? I’m using Reactiveforms with Formarray and I need the first element to be created in formArray to be already checked.

What I tried to:

HTML:

<form [formGroup]="variacaoForm">
   <ng-container *ngFor="let item of variacoes.controls; let i = index;">
      <div [formGroup]="item">
          <div *ngFor="let atributos of item.value.atributo;let indexatributo = index">

         <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="id_atributo_principal{{indexatributo}}" name="id_atributo_principal" formControlName="id_atributo_principal" value="{{atributos.iditemAtributo}}" checked>
        <label class="custom-control-label" for="id_atributo_principal{{indexatributo}}">Atributo principal</label>
      </div>
   </ng-container>
</form>

TS:

ngOnInit(){
    this.variacaoForm = this.fb.group({

      variacoes: this.fb.array([this.createFormGroup()])

    });

}

createFormGroup(produto?: any, indice?: number): FormGroup {
      return this.fb.group({
        id_atributo_principal: new FormControl('', [Validators.required]),
      });
    }
  }

Answer 1

Try it this way:

createFormGroup(produto?: any, indice?: number): FormGroup {
      return this.fb.group({
        id_atributo_principal: new FormControl(true, [Validators.required]),
      });
    }
  }