[解決済み] Angular2: [(ngModel)] with [ngModelOptions]="{standalone: true}"を使って、モデルのプロパティへの参照にリンクさせる。

質問

例えば、以下のようなMailtype型のtypescriptオブジェクトがあるとします。

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 オブジェクトが 1 つあり、html には Mailtype のプロパティ配列を編集したり追加したりするための form 要素があります。

<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 それについてのドキュメントが見つからないので、実際にどういう意味なのでしょうか？

どのように解決するのですか？

使用方法 @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