Angular2 use [(ngModel)] with [ngModelOptions]=“{standalone: true}” to link to a reference to model's property

Question

Let\'s say I have a typescript object of type Mailtype like following:

export class Mailtype {
  constructor(
    public name?: string,
    public locale?: s         


        

Answer 1

For me the code:

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

throws error, but I added name attribute to input:

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

and it started to work.

Answer 2

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

Answer 3

Using @angular/forms when you use a <form> tag it automatically creates a FormGroup.

For every contained ngModel tagged <input> it will create a FormControl and add it into the FormGroup created above; this FormControl will be named into the FormGroup using attribute name.

Example:

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

Said this, the answer to your question follows.

When you mark it as standalone: true this will not happen (it will not be added to the FormGroup).

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