0

El problema es que estoy partiendo de este ejemplo para crear mi formulario en Angular 11,

https://stackblitz.com/edit/angular-form-array-example

Donde cuando le doy en un input del FormArray, solo puedo digitar una sola tecla y se sale del input, no entiendo el porque y el ejemplo tiene el mismo problema, en mi codigo lo tengo asi (a claro que tengo Typescript en modo Strict).
Les agradezco cualquier colaboración, ya que he buscado y no encuentro solución a mi problema.
component.ts

export class OcasionalgComponent implements OnInit {
 Formulario: FormGroup;
 view:boolean;
 constructor(private LoginService:LoginService,private data: CentralService,private router:Router, private fb: FormBuilder) {
  this.view=false;
  this.Formulario = new FormGroup({
    perten:this.fb.array([]),
  })
 }

 onagregarpertenencias() {
    var letterPattern = '^[a-zA-Z ]*$';
    var numberpattern="[0-9]+"
    const control = new FormGroup({
      'costo': new FormControl('',[Validators.required]),
      'nombre': new FormControl('',[Validators.required]),
    });
    (<FormArray>this.Formulario.get('perten')).push(control);
  }

  removerpertenencias(i:number) {
    (<FormArray>this.Formulario.get('perten')).removeAt(i);
  }

  getValiditypertenenciascost(i:number) {
    return (!((<any>this.Formulario.get('perten')).controls[i].controls.costo.valid) && ((<any>this.Formulario.get('perten')).controls[i].controls.costo.touched || (<any>this.Formulario.get('perten')).controls[i].controls.costo.dirty));
  }
 
{

component.html

    <form [formGroup]="Formulario">
        <button class="btn btn-primary" [hidden]="view" (click)="onagregarpertenencias()">Agregar Pertenencia</button>
                    
                    <ng-container class="form-row" formArrayName="perten">
                            <div  *ngFor="let ctrl of Formulario.get('perten')!.value; let i = index"
                            [formGroupName]="i" >
                                <div class="col-md-6 mb-3" >
                                    <label >Costo</label>
                                    <input type="text" id="cost" formControlName="costo" placeholder="Costo"  autocomplete="off" [ngClass]="{'form-control':true, 'is-invalid': getValiditypertenenciascost(i)}">
                                    
                                </div>
                                <div class="col-md-6 mb-3" >
                                    <label >Nombre</label>
                                    <input type="text" id="nom" formControlName="nombre" placeholder="Nombre"  autocomplete="off" [ngClass]="{'form-control':true, 'is-invalid': getValiditypertenenciasnom(i)}">
                                    
                                </div>
                                <button class="btn btn-danger" type="button" [hidden]="view" (click)="removerpertenencias(i)">Eliminar</button>
                            </div>
                        
                    </ng-container>
  </form>

1 respuesta 1

1

el error está en el html en el *ngFor, cuando manejas formularios reactivos tienes que iterar los controls y no los values, por lo tanto debes colocar "Formulario.controls.perten.controls" en la sección del *ngFor y quedaría de la siguiente manera:

<div *ngFor="let ctrl of Formulario.controls.perten.controls; let i = index"
[formGroupName]="i" >
    <div class="col-md-6 mb-3" >
        <label >Costo</label>
        <input type="text" id="cost" formControlName="costo" placeholder="Costo"  autocomplete="off" [ngClass]="{'form-control':true, 'is-invalid': getValiditypertenenciascost(i)}">
        
    </div>
    <div class="col-md-6 mb-3" >
        <label >Nombre</label>
        <input type="text" id="nom" formControlName="nombre" placeholder="Nombre"  autocomplete="off" [ngClass]="{'form-control':true, 'is-invalid': getValiditypertenenciasnom(i)}">
        
    </div>
    <button class="btn btn-danger" type="button" [hidden]="view" (click)="removerpertenencias(i)">Eliminar</button>
</div>

Espero que no te haya dado la respuesta demasiado tarde y te funcione, éxitos...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.