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>