web-dev-qa-db-fra.com

Angular2 utilise [(ngModel)] avec [ngModelOptions] = "{standalone: ​​true}" pour créer un lien vers une référence à la propriété du modèle.

Disons que j'ai un objet TypeScript de type Mailtype comme suit:

export class Mailtype {
  constructor(
    public name?: string,
    public locale?: string,
    public email?: string,
    public properties? : Property[]
  ) {  }
}

Où son champ "properties" est un tableau de type Property:

export class Property {
  constructor(
    public name?: string,
    public type?: string,
    public example?: string,
    public required?: boolean,
    public masked?: boolean
  ) {  }
}

Maintenant, dans mon composant, je n'ai qu'un seul objet Mailtype et le code HTML contient un élément de formulaire utilisé pour l'édition et l'ajout 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 ne pouvais pas utiliser [(ngModel)] pour créer un lien vers une "propriété" de référence vers l'élément de tableau dans le tableau, en particulier au moment où j'itère le tableau? Parce qu'il lève 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}">

Cela suggère donc que j'utilise soit [ngModelOptions]="{standalone: true}", soit que j'ajoute un champ de nom au code HTML. Et il semble que [ngModelOptions]="{standalone: true}" fonctionne dans ce cas. Pourquoi standalone: true signifie-t-il réellement puisque je ne trouve aucune documentation à ce sujet?

typescriptangular
33
Calvin Hu

Utiliser @angular/forms lorsque vous utilisez une balise <form>, il crée automatiquement un FormGroup.

Pour chaque ngModel étiqueté <input> contenu, il va créer un FormControl et l'ajouter à la FormGroup créée ci-dessus; cette FormControl sera nommée dans la FormGroup à l'aide de l'attribut name.

Exemple:

<form #f="ngForm">
    <input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
    <span>{{ f.controls['firstField']?.value }}</span>
</form>

Cela dit, la réponse à votre question suit.

Lorsque vous le marquez comme standalone: true cela ne se produira pas (il ne sera pas ajouté à la FormGroup).

Référence: https://github.com/angular/angular/issues/9230#issuecomment-228116474

61
zpul

Pour moi le code:

<form (submit)="addTodo()">
  <input type="text" [(ngModel)]="text">
</form>

génère une erreur, mais j'ai ajouté l'attribut name à l'entrée:

<form (submit)="addTodo()">
  <input type="text" [(ngModel)]="text" name="text">
</form>

et cela a commencé à fonctionner.

7
Natalia
<form (submit)="addTodo()">
  <input type="text" [(ngModel)]="text">
</form>
1
Gopi