Angular2 utilisez [(ngModel)] avec [ngModelOptions]="{autonome: true}" de lien à une référence au modèle de la propriété
disons que j'ai un objet dactylographié de type Mailtype comme suit:
export class Mailtype {
constructor(
public name?: string,
public locale?: string,
public email?: string,
public properties? : Property[]
) { }
}
où son champ "Propriétés" est un tableau de propriétés de type:
export class Property {
constructor(
public name?: string,
public type?: string,
public example?: string,
public required?: boolean,
public masked?: boolean
) { }
}
maintenant dans mon component j'ai un seul objet Mailtype et le html a un élément de forme utilisé pour éditer et ajouter au tableau de propriétés du Mailtype:
<form>
<tr *ngFor="let property of model.properties; let i=index">
<td>
<input type="text" [(ngModel)]="property.name" required>
</td>
</tr>
<button (click)="onAddProperty()">Add property</button>
</form>
composant:
export class MailtypeComponent {
model : Mailtype;
constructor() {
this.model = new Mailtype('','','',[]);
this.model.properties.push(new Property());
}
onAddProperty() {
this.model.properties.push(new Property());
}
}
je me demandais si je n'étais pas autorisé à utiliser [(ngModel)] pour créer un lien vers une propriété de référence "" à l'élément du tableau dans le tableau, surtout en même temps que j'itère le tableau? Parce qu'il jette l'erreur suivante pour le code ci-dessus:
ORIGINAL EXCEPTION: If ngModel is used within a form tag, either the name attribute must be set
or the form control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
Donc, c'est ce qui suggère j'utilise soit [ngModelOptions]="{standalone: true}"
ou ajouter un champ Nom au html. Et il semble que [ngModelOptions]="{standalone: true}"
fonctionne dans ce cas. Pourquoi ne standalone: true
signifie en fait puisque je ne trouve pas de documentation à ce sujet?
3 réponses
en utilisant @angular/forms
lorsque vous utilisez un <form>
balise il crée automatiquement un FormGroup
.
Pour chaque contenu ngModel
tagged <input>
il va créer un FormControl
et l'ajouter dans le FormGroup
créé ci-dessus; ce FormControl
sera nommé dans le FormGroup
utilisation de l'attribut name
.
Exemple:
<form #f="ngForm">
<input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
<span>{{ f.controls['firstField']?.value }}</span>
</form>
ceci dit, la réponse à votre question suit.
quand vous marquez comme standalone: true
cela n'arrivera pas (il ne sera pas ajouté à FormGroup
).
Référence: https://github.com/angular/angular/issues/9230#issuecomment-228116474
Pour moi le code:
<form (submit)="addTodo()">
<input type="text" [(ngModel)]="text">
</form>
lance l'erreur, mais j'ai ajouté l'attribut name À input:
<form (submit)="addTodo()">
<input type="text" [(ngModel)]="text" name="text">
</form>
et il a commencé à travailler.
Remeber que tous les composants ou les controles dans la forme doivent être des noms, aussi des controllers externes comme prime ng, ngBootstrap.