ngModel não pode ser usado para registrar controles de formulário com uma diretiva formGroup pai


94

Depois de atualizar para RC5, começamos a receber este erro:

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>

Parece que no RC5 os dois não podem mais ser usados ​​juntos, mas não consegui encontrar uma solução alternativa.

Aqui está o componente que produz a exceção:

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

Você importou FormsModulee ReactiveFormsModule?
Günter Zöchbauer

Claro, os dois
user2363245

AFAIK, a única explicação existente é a seguinte: blog.angular-university.io/…
user2363245

Fonte da alteração encontrada: github.com/angular/angular/pull/10314
user2363245

Respostas:


178

A resposta está certa na mensagem de erro, você precisa indicar que é autônomo e, portanto, não entra em conflito com os controles do formulário:

[ngModelOptions]="{standalone: true}"

1
o que significa autônomo?
Jas

2
Isso significa que não é tratado pelo modelo / dados do formulário, então você pode passar os dados por qualquer objeto / modelo que você queira, como costumava ser no AngularJS 1
Avenir Çokaj 12/10/17

Só vejo esse problema na minha configuração de teste. O que está faltando exatamente? [ngModelOptions] = "{autônomo: true}" corrige o teste, mas altera a lógica. ngModel é herdado do componente pai, que declara ngForm no meu caso
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

28

Expandindo a resposta de @Avenir Çokaj

Mesmo sendo um novato, não entendi claramente a mensagem de erro no início.

O que a mensagem de erro indica é que em seu formGroup você tem um elemento que não é contabilizado em seu formControl. (Intencionalmente / acidentalmente)

Se você pretende não validar este campo, mas ainda deseja usar o ngModel neste elemento de entrada, adicione o sinalizador para indicar que ele é um componente independente sem a necessidade de validação, conforme mencionado por @Avenir acima.


6
E se você quiser usar if para validação E usá-lo com ngModel ao mesmo tempo?
Paulo

No meu caso, esqueci de declarar formControl para um elemento dentro de formGroup!
Sagar Khatri


8

quando você escreve formcontrolname Angular 2 não aceita. Você tem que escrever formControlName . trata-se de segundas palavras em maiúsculas.

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

se o erro ainda persistir, tente definir o controle do formulário para todos os campos do objeto (meuObjeto).

entre o início, <form> </form>por exemplo:<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

Se o componente tiver mais de 1 formulário, registre todos os controles e formulários

Eu precisava saber por que isso estava acontecendo em um determinado componente e não em qualquer outro componente.

O problema era que eu tinha 2 formulários em um componente e o segundo formulário ainda não tinha [formGroup]e ainda não estava registrado, pois ainda estava criando os formulários.

Fui em frente e completei escrevendo os dois formulários completos sem deixar uma entrada não registrada que resolva o problema.


1

Acabei de receber este erro porque não incluí todos os meus controles de formulário em a divcom um formGroupatributo.

Por exemplo, isso gerará um erro

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

Isso pode ser muito fácil de perder se for um formulário particularmente longo.


0

Se você deseja usar [formGroup]com formControlName, deve substituir o nameatributo por formControlNameformControlName.

Exemplo:

Isso não funciona porque usa o atributo [formGroup]e name.

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

Você deve substituir o nameatributo por formControlNamee ele funcionará bem assim:

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

uma solução para isso também poderia ser se você estiver usando um [formGroup] = "myGroup" e referenciar internamente com [(ngModel)] uma propriedade que está nog no formGroup. tente adicionar [ngModelOptions] = "{standalone: ​​true}" para que você diga ao seu compilador que ele pode ser excluído e é uma propriedade independente
ProblemAnswerQue

0

Parece que você está usando ngModel no mesmo campo de formulário que formControlName. O suporte para usar a propriedade de entrada ngModel e o evento ngModelChange com diretivas de formulário reativas foi descontinuado no Angular v6 e será removido no Angular v7


0

Este erro aparece quando você tem alguns controles de formulário (como Inputs, Selects, etc) em suas tags de grupo de formulários sem a propriedade formControlName.

Esses exemplos geram o erro:

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

Existem duas maneiras, a autônoma:

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

Ou incluindo-o no grupo de formulários

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

O último implica em defini-los no formulário de inicialização do Grupo

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.