После обновления до RC5 мы начали получать эту ошибку:
ngModel cannot be used to register form controls with a parent formGroup
directive.
Try using formGroup's partner directive "formControlName" instead. Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
Or, if you'd like to avoid registering this form control,
indicate that it's standalone in ngModelOptions:
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
<input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>
Похоже, что в RC5 эти два элемента больше нельзя использовать вместе, но я не смог найти альтернативного решения.
Вот компонент, вызывающий исключение:
<select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
<option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
</select>
angular
angular2-forms
angular2-formbuilder
user2363245
источник
источник
FormsModule
иReactiveFormsModule
?Ответы:
Ответ находится прямо в сообщении об ошибке, вам нужно указать, что оно автономное и поэтому не конфликтует с элементами управления формы:
источник
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.
https://next.angular.io/api/forms/FormControlName#use-with-ngmodelРасширение ответа @Avenir Çokaj
Даже будучи новичком, я сначала не понял сообщения об ошибке.
Сообщение об ошибке указывает на то, что в вашей formGroup есть элемент, который не учитывается в вашем formControl. (Умышленно / случайно)
Если вы намереваетесь не проверять это поле, но все же хотите использовать ngModel в этом элементе ввода, добавьте флаг, чтобы указать, что это автономный компонент без необходимости проверки, как указано в @Avenir выше.
источник
Хорошо, наконец-то он заработал: см. Https://github.com/angular/angular/pull/10314#issuecomment-242218563
Короче говоря, вы больше не можете использовать
name
атрибут внутри aformGroup
, иformControlName
вместо этого вы должны использоватьисточник
когда вы пишете formcontrolname Angular 2, не принимайте. Вы должны написать formControlName . речь идет о вторых словах в верхнем регистре.
если ошибка не исчезла, попробуйте установить контроль формы для всего поля объекта (myObject).
между запуском
<form> </form>
например:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.
источник
import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms'; this.userInfoForm = new FormGroup({ userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])), userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])), userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required])) });
<form [formGroup]="userInfoForm" class="form-horizontal"> <div class="form-group"> <label class="control-label"><i>*</i> User Name</label> <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName"> </div> <div class="form-group"> <label class="control-label"><i>*</i> Name</label> <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name"> </div> <div class="form-group"> <label class="control-label"><i>*</i> Surname</label> <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName"> </div> </form>
источник
Мне нужно было знать, почему это происходит в определенном компоненте, а не в каком-либо другом.
Проблема заключалась в том, что у меня было 2 формы в одном компоненте, а вторая форма еще не была
[formGroup]
и еще не была зарегистрирована, так как я все еще создавал формы.Я продолжил и завершил написание обеих форм, не оставив незарегистрированных входных данных, которые решают проблему.
источник
Я получил эту ошибку только потому, что не заключил все элементы управления формой в атрибут
div
сformGroup
атрибутом.Например, это вызовет ошибку
Его довольно легко пропустить, если это особенно длинная форма.
источник
Если вы хотите использовать
[formGroup]
сformControlName
, вы должны заменитьname
атрибут наformControlNameformControlName
.Пример:
Это не работает , потому что он использует
[formGroup]
иname
атрибут.Вы должны заменить
name
атрибут на,formControlName
и он будет работать следующим образом:источник
Похоже, вы используете ngModel в том же поле формы, что и formControlName. Поддержка использования свойства input ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7.
источник
Эта ошибка возникает, когда у вас есть некоторые элементы управления формой (например, Inputs, Selects и т. Д.) В тегах группы форм без свойства formControlName.
Эти примеры вызывают ошибку:
Есть два способа, автономный:
Или включить его в группу форм
Последний подразумевает их определение в форме инициализации Group
источник