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 Chokaj의 답변에 대한 확장.

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

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

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

네, 드디어 작동했습니다: https://github.com/angular/angular/pull/10314#issuecomment-242218563 을 참조하십시오.

간단히 말해서, 당신은 더 이상 사용할 수 없습니다.name 내의 formGroup사용해야 합니다.formControlName대신에

양식 컨트롤 이름을 쓸 때 Angular 2는 수락하지 않습니다.formControlName을 작성해야 합니다. 대문자 두 번째 단어입니다.

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

오류가 계속되면 모든 개체(myObject) 필드에 대한 양식 제어를 설정합니다.

<form> </form> 예:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

이 오류는 FormControlName 속성이 없는 양식 그룹 태그에 일부 양식 컨트롤(예: 입력, 선택 등)이 있을 때 나타납니다.

다음 예제에서는 오류가 발생합니다.

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

두 가지 방법이 있습니다. 독립 실행형입니다.

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

또는 양식 그룹에 포함

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

마지막은 초기화 양식 Group에서 정의하는 것을 의미합니다.

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});

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>

구성 요소의 양식이 하나 이상인 경우 모든 컨트롤 및 양식을 등록합니다.

저는 왜 이런 일이 다른 어떤 요소가 아닌 특정 요소에서 발생하는지 알아야 했습니다.

문제는 한 구성 요소에 두 개의 양식이 있고 두 번째 양식은 아직 없다는 것입니다.[formGroup]양식을 만들고 있었기 때문에 아직 등록되지 않았습니다.

저는 문제를 해결하기 위해 등록되지 않은 입력을 남기지 않고 두 양식을 모두 작성했습니다.

양식 컨트롤을 모두 포함하지 않았기 때문에 이 오류가 발생했습니다.div와 함께formGroup기여하다.

예를 들어, 오류가 발생합니다.

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

특히 긴 형식인 경우 이를 놓치기 쉽습니다.

사용할 경우[formGroup]와 함께formControlName교체해야 합니다.name로 귀속시키다.formControlNameformControlName.

예:

이것은 사용하기 때문에 작동하지 않습니다.[formGroup]그리고.name기여하다.

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

교체해야 합니다.name으로 귀속시키다.formControlName다음과 같이 잘 작동합니다.

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

formControlName과 동일한 양식 필드에서 ngModel을 사용하는 것 같습니다.반응형 명령과 함께 ngModel 입력 속성 및 ngModelChange 이벤트를 사용하는 지원은 Angular v6에서 더 이상 사용되지 않으며 Angular v7에서 제거됩니다.

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