Angular2 используйте [(ngModel)] с [ngModelOptions] = "{standalone: true}", чтобы ссылаться на ссылку на свойство модели

Скажем, у меня есть объект typescript типа 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 на самом деле означает, поскольку я не могу найти документацию об этом?

Ответ 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

Ответ 2

Для меня код:

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

Ответ 3

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

Ответ 4

Вспомните, что все компоненты или элементы управления внутри формы должны быть именем, а также внешними контроллерами, такими как prime ng, ngBootstrap.

ExamplePrimeNg