ngModel을 사용하여 부모 formGroup 지시문으로 양식 컨트롤을 등록 할 수 없습니다.

ngModel을 사용하여 부모 formGroup 지시문으로 양식 컨트롤을 등록 할 수 없습니다.

---

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>

---

대답은 오류 메시지에 있습니다. 독립 실행 형이므로 양식 컨트롤과 충돌하지 않는다는 것을 표시해야합니다.

[ngModelOptions]="{standalone: true}"

---

@Avenir Çokaj의 답변 확장

초보자이기 때문에 처음에는 오류 메시지를 명확하게 이해하지 못했습니다.

오류 메시지가 나타내는 것은 formGroup에 formControl에서 설명되지 않는 요소가 있다는 것입니다. (의도적 / 의도적)

이 필드의 유효성을 검사하지 않고이 입력 요소에서 ngModel을 계속 사용하려면 위의 @Avenir에서 언급 한대로 유효성 검사가 필요없는 독립형 구성 요소임을 나타내는 플래그를 추가하십시오.

---

좋아, 마침내 작동하게되었다 : https://github.com/angular/angular/pull/10314#issuecomment-242218563 참조

간단히 말해에서 더 이상 name속성을 사용할 수 없으며 대신 formGroup사용해야 formControlName합니다.

---

formcontrolname Angular 2 를 작성할 때 수락하지 마십시오. formControlName 을 작성 해야 합니다. 대문자 두 번째 단어에 관한 것입니다.

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

오류가 계속 발생하면 모든 object (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>

---

구성 요소에 두 개 이상의 양식이있는 경우 모든 컨트롤 및 양식 등록

I needed to know why this was happening in a certain component and not in any other component.

The issue was that I had 2 forms in one component and the second form didn't yet have [formGroup] and wasn't registered yet since I was still building the forms.

I went ahead and completed writting both forms complete without leaving a input not registered which solve the issue.

---

I just got this error because I did not enclose all my form controls within a div with a formGroup attribute.

For example, this will throw an error

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

This can be quite easy to miss if its a particularly long form.

---

If you want to use [formGroup] with formControlName, you must replace name attribute with formControlNameformControlName.

Example:

This does not work because it uses the [formGroup] and name attribute.

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

You should replace the name attribute by formControlName and it will work fine like this following:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

참고URL : https://stackoverflow.com/questions/39126638/ngmodel-cannot-be-used-to-register-form-controls-with-a-parent-formgroup-directi