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