Angular2 usare [(ngModel)] con [ngModelOptions] = "{standalone: ​​true}" per collegare ad un riferimento alla proprietà del modello

Question

Diciamo che ho un oggetto dattiloscritto di tipo Mailtype come segue:

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

dove il suo campo "proprietà" è un array di tipo di immobile:

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

Ora nel mio componente ho un singolo oggetto Mailtype e l'HTML ha un elemento del modulo utilizzato per l'editing e l'aggiunta alla proprietà di matrice del 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> 

componente:

export class MailtypeComponent { 
    model : Mailtype; 
    constructor() { 
    this.model = new Mailtype('','','',[]); 
    this.model.properties.push(new Property()); 
    } 

    onAddProperty() { 
    this.model.properties.push(new Property()); 
    } 
} 

mi chiedevo se io non sono autorizzato a utilizzare [(ngModel)] per creare un collegamento a un riferimento di "proprietà" per l'elemento di matrice nella matrice, in particolare allo stesso volta sto iterando la matrice? Perché getta il seguente errore per il codice di cui sopra:

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}"> 

Quindi è suggerendo che uso sia [ngModelOptions]="{standalone: true}" o aggiungere un campo di nome al codice HTML. E sembra che [ngModelOptions]="{standalone: true}" lavori in questo caso. Perché in realtà standalone: true significa che non riesco a trovare alcuna documentazione a riguardo?

Answer 1

Utilizzando @angular/forms quando si utilizza un tag <form>, viene creato automaticamente un FormGroup.

Per ogni contenuto ngModel tagged <input> si creerà un FormControl e aggiungerlo nella FormGroup creato in precedenza; questo FormControl sarà denominato nello FormGroup utilizzando l'attributo name.

Esempio:

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

detto questo, la risposta alla tua domanda segue.

Quando si contrassegna come standalone: true ciò non accadrà (non verrà aggiunto allo FormGroup).

Riferimento: https://github.com/angular/angular/issues/9230#issuecomment-228116474

Answer 2

Per me il codice:

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

genera un errore, ma ho aggiunto attributo name per inserire:

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

e ha iniziato a funzionare.

Answer 3

Ricordare che tutti i componenti o i controlli all'interno del modulo devono essere denominati, anche controller esterni come prime ng, ngBootstrap.

ExamplePrimeNg