Angular2将[(ngModel)]与[ngModelOptions] =“" {standalone:true}“一起使用；链接到对模型属性的引用 [英] Angular2 use [(ngModel)] with [ngModelOptions]="{standalone: true}" to link to a reference to model's property

问题描述

假设我有一个Mailtype类型的打字稿对象，如下所示:

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
  ) {  }
}

现在在我的组件中，我有一个Mailtype对象，而html中有一个form元素，用于编辑和添加到Mailtype的属性数组中:

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>

组件:

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

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

我想知道是否不允许使用[[ngModel)]链接到对数组中数组元素的引用属性"，尤其是在我同时迭代数组的同时?因为上面的代码会引发以下错误:

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

因此建议我使用[ngModelOptions]="{standalone: true}"或将名称字段添加到html中.看起来[ngModelOptions]="{standalone: true}"在这种情况下可以工作.为什么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. Why does standalone: true actually means since I cannot find any documentation about it?

推荐答案

在使用<form>标记时使用@angular/forms会自动创建FormGroup.

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

对于每个包含ngModel标签的<input>，它将创建一个FormControl并将其添加到上面创建的FormGroup中；该FormControl将使用属性name命名为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.

示例:

<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.

将其标记为standalone: true时不会发生(不会添加到FormGroup中).

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

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

这篇关于Angular2将[(ngModel)]与[ngModelOptions] =“" {standalone:true}“一起使用；链接到对模型属性的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！