Búsqueda de sitios web

html - Angular 2 Form "No se puede encontrar el control"

Estoy tratando de usar Angular 2 Forms para la validación, pero cuando intento agregar más de un control, parece que simplemente se ignora. He seguido muchas guías diferentes para ver cómo lo hace todo el mundo, pero ninguna de esas formas parece funcionar.

Lo que he estado haciendo es esto en mi plantilla:

<form [formGroup]="form" novalidate (ngSubmit)="save(form.valid)">
<div class="row" id="message-wrapper">
   <label>Message</label>
   <small [hidden]="form.controls.message.valid || (form.controls.message.pristine && !submitted)">
        Message is required (minimum 10 characters).
    
    <textarea 
        class="textarea-scaled"
        type="text"
        [(ngModel)]="campaign.message"
        formControlName="message"
        placeholder="This will be sent out by supporters with a URL back to this campaign">
     </textarea>
</div>

<div class="row" id="promo-wrapper">
    <label>Promotion: </label>
    <small [hidden]="form.controls.promotion.valid ||(form.controls.promotion.pristine && !submitted)">
      Promotion is required and should be between 10 and 100 characters
    
    <textarea 
        class="textarea-scaled"
        type="text"
        [(ngModel)]="campaign.promotion"
        formControlName="promotion"
        placeholder="What would you like to be sent out in promotional messages?">
    </textarea>
</div>
</form>

Entonces en mi componente hago esto:

form: FormGroup;

  constructor(private builder: FormBuilder,
              private _dataservice: DataService) {

      this.form = builder.group({
          "message": ['', [Validators.required, Validators.minLength(10)]],
          "promotion": ['', [Validators.required, Validators.minLength(10)]]
      });
  }

Pero sigo recibiendo un error en la consola que dice "No se puede encontrar el control 'promotion'"...

¡Cualquier ayuda será apreciada!

Respuesta #1

Esto puede no ser la respuesta a la pregunta original, pero esto puede ser útil si llegaste aquí desde Google.

Necesitas revisar estas cosas.

  1. Debes tener un atributo "name" para todos los controles que tienen [ngModel]

  2. Si excluyes algunos campos de la validación, entonces agrega [ngModelOptions]="{standalone: true}" (recuerda la primera regla, aún necesitas un "name")

  3. Asegúrate de tener el atributo formControlName para los controles que vas a validar. (recuerda la primera regla)

Respuesta #2

Intenté crear un nuevo FormGroup en mi componente. He importado ReactiveFormsModule de angular/forms y lo agregué a los imports de app.module.ts.

pero estaba obteniendo errores de No se puede encontrar el nombre 'FormGroup' y No se puede encontrar el nombre 'FormControl'

Aquí está mi componente

export class SignupFormComponent {
  form1 = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });
}

Agregar la siguiente declaración de importación en el componente resolvió mi problema.

import { FormGroup, FormControl } from '@angular/forms';

No es la respuesta a tu pregunta, pero lo publico ya que esto podría ayudar a alguien que enfrente el mismo error.

Artículos relacionados