Tengo una forma reactiva con una matriz de forma dinámica. Hay un botón para agregar nuevos objetos al formulario. Sin embargo, solo quiero que este botón esté "habilitado" cuando el objeto actual en la matriz se haya llenado o ya esté lleno.
<div *ngIf="form"> <form [formGroup]="form"> <div formArrayName="justificationItems"> <div *ngFor="let orgs of form.controls['justificationItems']?.controls; let i = index" [formGroupName]="i"> <input formControlName="name" placeholder="Item name"> <input formControlName="description" placeholder="Item description"> <input formControlName="code" placeholder="Item price"> </div> <button [disabled]="!form.controls['justificationItems']?.controls.description" type="button" (click)="addItem()">Add Item</button> </div> </form> </div>Necesito agregar el atributo de deshabilitado basado en 3 campos para ver si están vacíos. Intenté esto con un campo para comenzar:
[disabled]="!form.controls['justificationItems']?.controls.description"Pensé que lo anterior miraría los campos de descripción y vería si tiene valor.
Cualquier método alternativo es bienvenido. Creo que el problema es que necesita mirar un elemento de matriz.
Usaría un observable, principalmente porque me gusta manejar toda la lógica en la plantilla, también esto es más reutilizable en mi opinión en lugar de escribir todos los controles en la plantilla. ¿Qué pasa si desea hacer una verificación más complicada para deshabilitar, o qué pasa si los nombres de control de su formulario cambian? Esto es más fácil de manejar en mi opinión. Pero sí, es una opinión, pero pensé en tirar esto por ahí :)
Por lo tanto, escuche los cambios de valor de formray, en este punto, solo aborde el último elemento de la matriz y verifique que todas las propiedades de este objeto tengan valores:
this.isDisabled$ = this.form.get('justificationItems').valueChanges.pipe( map(value => value[value.length-1]), map(val => Object.keys(val).some(x => val[x] === "")), ) Luego, en la plantilla, use una tubería async que cancela la suscripción por usted :)
<button [disabled]="isDisabled$ | async" type="button" (click)="addItem()">Add Item</button>Utilicé Object.keys arriba porque a Stackblitz no le gustaba que usara Object.values, ¡así que Object.values también es un enfoque válido!
Tu Stackblitz bifurcado aquí .
Verifique los valores en el último elemento de la matriz y deshabilite el botón según el valor.
Coloque el botón dentro de div en bucle para obtener el acceso de i (índice)
<button *ngIf="i == form.value.justificationItems.length - 1" [disabled]=" !form.value.justificationItems[i].name || !form.value.justificationItems[i].description || !form.value.justificationItems[i].code " type="button" (click)="addItem()" > Add Item </button>