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?: string,
    public email?: string,
    public properties? : Property[]
  ) {  }
}

Where its "properties" field is an array of type Property:

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

Now in my component I have a single Mailtype object and the html has a form element used for editing and adding to the properties array of the 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>

component:

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

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

I was wondering if I'm not allowed to use [(ngModel)] to link to a reference "property" to the array element in the array, especially at the same time I'm iterating the array? Because it throws the following error for the above code:

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

So it's suggesting I use either [ngModelOptions]="{standalone: true}" or add a name field to the html. And it looks like [ngModelOptions]="{standalone: true}" works in this case. What does standalone: true actually mean since I cannot find any documentation about it?

Heatherheatherly

Remeber that all component or controlles within form should be name, also external controllers like prime ng, ngBootstrap. ExamplePrimeNg – Dicky

Answer 1

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

Tranship

Answer 2

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.

Autism

Answer 3

if you don't want to use form

        <mat-form-field appearance="none" class="some-class">
          <mat-select class="some-class-2" placeholder="Select" 
           [(ngModel)]="selectedItem" 
           (ngModelChange)="onSelectItem($event)" [ngModelOptions]=" 
             {standalone: true}">
             <mat-option *ngFor="let item of itemOptions" 
               [value]="item.id">{{item.name}}</mat-option>
          </mat-select>
        </mat-form-field>

Shilohshim

Answer 4

  <input
    type="text"
    matInput
    placeholder="Ex. Sample Title"
    [(ngModel)]="createNewBlog.BlogDescription"
    required
    name="text"
  />

Evania

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Borsch

Answer 5

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

Iow

Welcome to SO! Please edit your answer so that it contains some textual explanation, relates to the question, ... – Ultrafilter