首页 文章

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

提问于
浏览 887
21

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

export class Mailtype {
  constructor(
    public name?: string,
    public locale?: string,
    public email?: string,
    public 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 实际上意味着因为我找不到任何关于它的文档?

3 回答

  • 50

    使用 @angular/forms 时,使用 @angular/forms 标记会自动创建 FormGroup .

    对于每个包含 ngModel 标记的 <input> ,它将创建 FormControl 并将其添加到上面创建的 FormGroup 中;这个 FormControl 将被命名为 FormGroup using属性 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

  • 6

    对我来说代码:

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

    抛出错误,但我添加了name属性到输入:

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

    它开始起作用了 .

  • -2

    记住表单中的所有组件或控件都应该是名称,还有外部控制器,如prime ng,ngBootstrap .

    ExamplePrimeNg

相关问题