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?

21
demandé sur Calvin Hu 2016-07-14 07:55:51

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

49
répondu zpul 2016-07-14 07:40:08

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.

6
répondu Natalia 2016-12-20 10:12:18

Remeber que tous les composants ou les controles dans la forme doivent être des noms, aussi des controllers externes comme prime ng, ngBootstrap.

ExamplePrimeNg

-2
répondu gustavo herrera 2017-08-07 17:22:21