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


89

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>

당신은 가져나요 FormsModuleReactiveFormsModule?
Günter Zöchbauer

물론입니다. 둘 다
user2363245

AFAIK, 유일한 기존 설명은 다음과 같습니다. blog.angular-university.io/…
user2363245

변경의 출처를 찾았습니다 : github.com/angular/angular/pull/10314
user2363245

답변:


171

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

[ngModelOptions]="{standalone: true}"

1
독립형이란 무엇을 의미합니까?
Jas

2
그것은 형식 모델 / 데이터에 의해 처리되지 않는다는 것을 의미하므로 AngularJS 1
Avenir Çokaj

이 문제는 테스트 설정에서만 볼 수 있습니다. 정확히 무엇이 빠졌습니까? [ngModelOptions] = "{standalone : true}"테스트는 수정하지만 로직은 변경합니다. ngModel은 내 경우에는 ngForm를 선언 부모 구성 요소로부터 상속
aholbreich

2
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
WasiF

27

@Avenir Çokaj의 답변 확장

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

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

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


6
if를 유효성 검사에 사용하고 ngModel과 동시에 사용하려면 어떻게해야합니까?
Paul

제 경우에는 formGroup 내부의 요소에 대해 formControl을 선언하지 못했습니다!
Sagar Khatri


8

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>.


5

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>


1

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

왜 이것이 다른 구성 요소가 아닌 특정 구성 요소에서 발생하는지 알아야했습니다.

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

나는 계속해서 문제를 해결하는 등록되지 않은 입력을 남기지 않고 두 양식을 완성했습니다.


1

나는 내 내 모든 폼 컨트롤을 둘러싸하지 않았기 때문에 난 그냥이 오류가 발생했습니다 divformGroup속성.

예를 들어이 경우 오류가 발생합니다.

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

특히 긴 형태라면 놓치기 쉽습니다.


1

[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>

이에 대한 해결책은 [formGroup] = "myGroup"을 사용하고 formGroup의 nog 속성 인 [(ngModel)]을 내부적으로 참조하는 경우 일 수도 있습니다. [ngModelOptions] = "{standalone : true}"를 추가하여 컴파일러에 제외 될 수 있으며 독립형 속성
임을 알려줍니다.

0

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


0

이 오류는 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>

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

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.