I can't assign a value dynamically on an input type: radio / Angular

Question

I'm quite lost, I'm trying to build the template of a form dynamically depending on the url, but for some reason i can't set the attribute value on the radio type input.

form-cake html

<form [formGroup]="formCake" (ngSubmit)="onSubmit()">
  <ng-container *ngFor="let template of formTemplate">

    <label for="{{template.id}}">{{template.label}}: </label>
    
     <input id="{{template.id}}" 
     type="{{template.type}}" 
     [name]="template.name"  
     [formControlName]="template.name" 
     [attr.value]="(template.type === 'radio') ? template.value: null">
  
  </ng-container>

form-cake component

ngOnInit(): void {

    this.formCake = this.formService.formControllerSetup();
    this.formTemplate = this.formService.formHtmlSetup();

formService

formControllerSetup(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      description: ['', [Validators.required]],
      image: ['', Validators.required],
      price: [+'', Validators.required],
      cakeType: [null, Validators.required],
      allergies: this.fb.group({
        cereal: [false],
        nuts: [false],
        eggs: [false],
        milk: [false],
        soy: [false],
        peanuts: [false],
        sulfite: [false],
        // ... Ajoute d'autres allergies ici
      })
    });
  }


  formHtmlSetup() {

    let fields!: any[];
    return fields = [
      { type: 'text',id: 'name',name: 'name', label: 'Name', validation: { required: true } },
      { type: 'text',id: 'description', name: 'description', label: 'Description', validation: { required: true } },
      { type: 'text',id: 'image', name: 'image', label: 'Image', validation: { required: true } },
      { type: 'number',id: 'price', name: 'price', label: 'Price', validation: { required: true } },
      { type: 'radio',id: 'pm', name: 'cakeType', label: 'Pm', validation: { required: true } },
      { type: 'radio',id: 'pie', name: 'cakeType', label: 'Pie', validation: { required: true } },

    ]
  }

I'm building the template inside the service, that I inject it inside the component, then i loop on the formTemplate to get all the fields in HTML.

     <input id="{{template.id}}" 
     type="{{template.type}}" 
     [name]="template.name"  
     [formControlName]="template.name" 
     [attr.value]="template.id">

I did try with

[value]="template.id"/ value="{{template.id}}"

but only this version is working [attr.value]="template.id". Knowing that originally there is a ternary [attr.value]="(template.type === 'radio') ? template.id: null" to filter the other fields.

But like this, I can see that the other inputs are getting updated but not the radio type one.

Maybe i'm getting tired, but do not know where to look anymore.

Answer 1

I'm afraid that you can not assign dinamically the type radio and the value to a input with FormControlName. The only I imagine you can do it is use two *ngIf (one for input type radio and other for the rest)

<form [formGroup]="formCake">
  <ng-container *ngFor="let template of formTemplate">
    <label for="{{template.id}}">{{template.label}}: </label>

    <!--see that when type= radio you "hardcode" de type-->
    <input
      *ngIf="template.type==='radio'"
      [id]="template.id"
      type="radio"
      [name]="template.name"
      [value]="template.id"
      [formControlName]="template.name"
    />
    <input
      *ngIf="template.type!=='radio'"
      [id]="template.id"
      [type]="template.type"
      [name]="template.name"
      [formControlName]="template.name"
    />
  </ng-container>
</form>

a stackblitz