Tengo una lista de campos de entrada que se generan con un modelo. Estoy tratando de agregarles validación. El requisito es que no deben estar vacíos o tener menos de 2 caracteres. el problema está en la documentación solo muestra la validación con el nombre de la variable no generada dinámicamente. Todos mis campos se generan dinámicamente. Por lo tanto, no hay tempVariableName que pueda codificar (de lo contrario, entran en conflicto), así que creé una variable temporal a partir del nombre de la propiedad a la que vinculé el campo. Así que se me ocurrió algo como esto:
<div *ngFor="let field of connector.configFields"> <label>{{field.name}}</label> <input [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'" placeholder="{{field.name}} (required)" ngControl="[fieldName+field.name]" required minlength="2" #fieldName+[field.name]="ngModel" /> <div *ngIf="(fieldName+[field.name]).errors && ((fieldName+[field.name]).dirty || (fieldName+[field.name]).touched)"> <span *ngIf="(fieldName+[field.name]).errors.required">Enter Name</span> <span *ngIf="(fieldName+[field.name]).errors.minlength">Name minimum at 2 characters</span> </div> </div>y los configFields en TypeScript se ven así:
export class FieldModel { public name: string; public type: string; public value: any;}
Pero esto simplemente no funcionaría. Soy nuevo en angular 2, así que no estoy exactamente seguro de qué hice mal.
Puede usar el index único para cada campo en la matriz. Use esto junto con el atributo de name (y ngModel ) que evaluará cada control de formulario por separado. Entonces, cada campo de entrada recibe un nombre único, por ejemplo:
name="f{{i}}" donde obtenemos {{i}} de la iteración:
<div *ngFor="let field of connector.configFields; let i = index">Entonces, finalmente, su plantilla podría verse así:
<form #myForm="ngForm"> <div *ngFor="let field of connector.configFields; let i = index"> <input name="f{{i}}" [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'" required #f="ngModel" minlength="2"/> <div *ngIf="f.errors && (f.dirty || f.touched)"> <div *ngIf="f.errors.required"> This field is required </div> <div *ngIf="f.errors.minlength"> Min 2 chars </div> </div> </div> </form>Aquí hay un vivo
Prepare los datos en el modelo y regrese a angular. Lógica angular y dura en la plantilla = malos amigos.
Pero si tiene una opción de selección y si tiene * ngFor para la opción, entonces el mensaje de error pierde su asignación, debido al segundo bucle * ngFor
es mejor definir una clase personalizada para el mensaje de error y usar la visualización css: ninguno o **bloquear*
.custom-valid-box{ display: none; } .form-control-danger + .custom-valid-box{ display: block; }