Angular2：使用 [(ngModel)] 和 [ngModelOptions]="{standalone: true}" 链接到对模型属性的引用

Question

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

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

其“properties”字段是 Property 类型的数组：

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

现在在我的组件中，我有一个 Mailtype 对象，并且 html 有一个表单元素，用于编辑和添加到 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)] 链接到数组中数组元素的引用“属性”，特别是在迭代数组的同时？因为上面的代码会抛出以下错误：

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

实际上意味着什么？

Answer 1

使用

@angular/forms

当您使用

<form>

标签时，它会自动创建

FormGroup

。

对于每个包含的

ngModel

标记为

<input>

，它将创建一个

FormControl

并将其添加到上面创建的

FormGroup

中；该

FormControl

将使用属性

FormGroup

命名为

name

。

示例：

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

说到这里，你的问题的答案如下。

当您将其标记为

standalone: true

时，这种情况不会发生（它不会添加到

FormGroup

中）。

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

Answer 2

对我来说代码：

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

抛出错误，但我在输入中添加了名称属性：

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

它开始起作用了。

Answer 3

如果您不想使用表格

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

Answer 4

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

Answer 5

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