ngModel no se puede utilizar para registrar controles de formulario con una directiva formGroup principal


89

Después de actualizar a RC5, comenzamos a recibir este error:

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 en RC5 los dos ya no se pueden usar juntos, pero no pude encontrar una solución alternativa.

Aquí está el componente que produce la excepción:

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

¿Importaste FormsModuley ReactiveFormsModule?
Günter Zöchbauer

Seguro, ambos
user2363245

AFAIK, la única explicación existente es la siguiente: blog.angular-university.io/…
user2363245

Fuente encontrada del cambio: github.com/angular/angular/pull/10314
user2363245

Respuestas:


171

La respuesta está correcta en el mensaje de error, debe indicar que es independiente y, por lo tanto, no entra en conflicto con los controles del formulario:

[ngModelOptions]="{standalone: true}"

1
¿Qué significa independiente?
Jas

2
Significa que no es manejado por el modelo / datos de formulario, por lo que puede pasar datos por cualquier objeto / modelo que desee, como solía ser en AngularJS 1
Avenir Çokaj

Solo veo este problema en mi configuración de prueba. ¿Qué falta exactamente? [ngModelOptions] = "{standalone: ​​true}" corrige la prueba pero cambia la lógica. ngModel se hereda del componente principal, que declara ngForm en mi 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

27

Ampliando la respuesta de @Avenir Çokaj

Siendo un novato, incluso yo no entendí claramente el mensaje de error al principio.

Lo que indica el mensaje de error es que en su formGroup tiene un elemento que no se tiene en cuenta en su formControl. (Intencionalmente / accidentalmente)

Si tiene la intención de no validar este campo pero aún desea usar ngModel en este elemento de entrada, agregue la marca para indicar que es un componente independiente sin necesidad de validación como se menciona en @Avenir anteriormente.


6
Sin embargo, ¿qué pasa si desea usarlo para la validación Y usarlo con ngModel al mismo tiempo?
Paul

En mi caso, ¡me perdí declarar formControl para un elemento dentro de formGroup!
Sagar Khatri


8

cuando escribe formcontrolname Angular 2 no acepta. Tienes que escribir formControlName . se trata de segundas palabras en mayúscula.

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

si el error aún continúa, intente establecer el control de formulario para todo el campo del objeto (myObject).

entre inicio <form> </form>por ejemplo:<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

Si el componente tiene más de 1 formulario, registre todos los controles y formularios

Necesitaba saber por qué sucedía esto en un determinado componente y no en ningún otro componente.

El problema era que tenía 2 formularios en un componente y el segundo formulario aún no [formGroup]estaba registrado ni estaba registrado ya que todavía estaba creando los formularios.

Seguí adelante y terminé de escribir ambos formularios completos sin dejar una entrada no registrada que resuelva el problema.


1

Recibí este error porque no incluí todos mis controles de formulario dentro de divun formGroupatributo.

Por ejemplo, esto arrojará un error

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

Esto puede ser bastante fácil de pasar por alto si es una forma particularmente larga.


1

Si desea utilizar [formGroup]con formControlName, debe reemplazar el nameatributo con formControlNameformControlName.

Ejemplo:

Esto no funciona porque usa el atributo [formGroup]y name.

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

Debe reemplazar el nameatributo por formControlNamey funcionará bien de la siguiente manera:

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

una solución para esto también podría ser si está usando un [formGroup] = "myGroup" e internamente hace referencia con [(ngModel)] una propiedad que es nog en el formGroup. intente agregar [ngModelOptions] = "{standalone: ​​true}" para que le diga a su compilador que puede ser excluido y que es una propiedad independiente
ProblemAnswerQue

0

Parece que está usando ngModel en el mismo campo de formulario que formControlName. El soporte para usar la propiedad de entrada ngModel y el evento ngModelChange con directivas de formulario reactivo ha quedado obsoleto en Angular v6 y se eliminará en Angular v7


0

Este error aparece cuando tiene algunos controles de formulario (como Entradas, Selecciones, etc.) en sus etiquetas de grupo de formulario sin la propiedad formControlName.

Esos ejemplos arrojan el error:

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

Hay dos formas, la independiente:

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

O incluirlo en el grupo de formularios

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

El último implica definirlos en el formulario de inicialización Grupo

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.