Estoy trabajando con formas reactivas. Quiero vincular valores en una matriz de cadenas, por ejemplo:
The list of fruits will be populated in the input radio. //<pre>{{ form.value | json }}</pre> { "favorite_fruits": [ "Banana", "Apple", ] } <form [formGroup]="form" > <pre>{{ form.value | json }}</pre> <div class="d-grid gap-2 d-md-flex justify-content-md-end"> <button type="button" (click)="getFavoriteFruits().push(createFavoriteFruits())" class="btn btn-primary btn-sm">add FavoriteFruits</button> </div> <div formArrayName="favorite_fruits" *ngFor="let h of getFavoriteFruits()!.controls; let indexFavoriteFruits = index;"> <div class="form-group col-md-12"> <label id="">Favorite Fruits</label> <div *ngIf="(fruits$ | async) as fruits"> <div *ngFor="let fruit of fruits; let indexFruit = index;"> <input type="radio" [formControlName]="indexFavoriteFruits" [value]="fruit.name">{{ fruit.name }} </div> </div> </div> </div> </form> ngOnInit(): void { this.getFruits(); this.form = this.formBuilder.group({ "favorite_fruits": this.formBuilder.array([ this.createFavoriteFruits() ]), }); } createFavoriteFruits() { return this.formBuilder.control('', []); } getFavoriteFruits(): FormArray { return this.form.get('favorite_fruits') as FormArray; } getFruits() { this.fruits$ = of ([{ "id": 1, "name": "Banana" }, { "id": 2, "name": "Apple" }, { "id": 3, "name": "Pear" }]) .pipe( delay(2000) ) } Estaba tratando de usar [formControlName]="indexFavoriteFruits" (entre paréntesis) y apareció el siguiente error:
error TS2322: Type 'number' is not assignable to type 'string'. <input type="radio" [formControlName]="indexFavoriteFruits" [value]="fruit.name">{{ fruit.name }} También traté de usar formControlName="indexFavoriteFruits" , pero recibí otro error:
core.js:6456 ERROR Error: Cannot find control with path: 'favorite_fruits -> indexFavoriteFruits'Es posible que desee intentar usar formControlName="favorite_fruits"
indexFavoriteFruits es el índice que está obteniendo en *ngFor, por eso se interpreta como un número. El nombre de control de formulario correcto es frutas_favoritas
Parece que está utilizando la versión Angular <v9, que acepta solo una string como valor para formControlName . Que se cambió desde Angular v9 para aceptar string|number|null .
Por lo tanto, debe convertir indexFavoriteFruits en una cadena o cualquiera porque formControlName solo acepta cadenas.
Puede enviarlo a any método usando $any método, como el siguiente:
<input type="radio" [formControlName]="$any(indexFavoriteFruits)" [value]="fruit.name">