El código para cuadros de texto generados dinámicamente uisng *ngFor
<tr *ngFor="let computer in _Computers; let i = index;"> <td>{{computer.Name}}</td><td>{{computer.Optional}}</td> <td> <input matInput [formControl] = "frmCtrl" name="UnitofPrice" [(ngModel)]="computer[i]"> </td> <td>{{computer.UnitofPrice}}</td>Código mecanografiado
public frmCtrl: FormControl = new FormControl('', this.customValidator()); customValidator() { return (control: AbstractControl): { [key: string]: boolean } | null => { if ((!control.value)) { return { 'textRequired': true }; } return null; }; }El código anterior funciona bien. Es decir, cada vez que el cuadro de texto está vacío, muestra un error. Supongamos que quiero validar solo los cuadros de texto según la propiedad "Opcional" de la lista de computadoras. Aquí, ¿Cómo pasar la identificación de la computadora o la propiedad opcional a la función de validación personalizada? Por favor recomiende.
Utilizaría un formulario y formarray, además, lo que tiene ahora es un solo control de formulario para toda su matriz, por lo que no puedo ver cómo funciona para su matriz.
Además, el validador que ha escrito es básicamente un validador required , por lo que podría usar el validador incorporado para eso. Así que sugiero lo siguiente:
Tengo una matriz de _Computers codificada, construyo el formulario, hago un bucle de _Computers y agrego controles de formulario al formulario. Según la propiedad Optional , configuro Validators.required para el precio unitario solo para aquellos en los que el valor Optional es false . Aquí estoy presionando 2 controles de formulario para cada grupo de formularios en la matriz, el name y la unitOfPrice de precio, puede presionar cualquier cantidad que desee.
Hago un getter para formaray, solo para facilitar el acceso. Con todo, el código se vería así:
_Computers = [ { Name: 'name1', Optional: true, UnitOfPrice: null }, { Name: 'name2', Optional: false, UnitOfPrice: null }, ]; myForm!: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ computers: this.fb.array([]), }); this._Computers.forEach((x: any) => { if (x.Optional) { this.computersArr.push(this.fb.group({ name: [x.Name], unitOfPrice: [null] })); } else { this.computersArr.push(this.fb.group({ name: [x.Name], unitOfPrice: [null, [Validators.required]] })); } }); } get computersArr() { return (this.myForm.get('computers') as FormArray).controls; } He sido perezoso y he usado any aquí, ¡por favor escriba sus datos en su lugar!
La plantilla luego mostraría el formulario, y podemos mostrar un mensaje de requerido si tiene dicho validador:
<form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div formArrayName="computers"> <div *ngFor="let computer of computersArr; let i = index"> <div [formGroupName]="i"> <label>{{computer.get('name').value}}</label> <input formControlName="unitOfPrice" /> <small *ngIf="computer.get('unitOfPrice').hasError('required')">Required!!</small> </div> </div> </div> </form> Arriba está usando div pero puede replicar fácilmente lo mismo para una tabla.
Aquí hay un STACKBLITZ para su referencia.