Angular 7 FormControlName da error de la consola

votos
0

Tengo una forma reactiva en mi página web, pero da un error que se ve así:

Error Error: formControlName debe ser utilizado con la directiva de un padre formGroup. Usted querrá agregar una directiva formGroup y pasarlo FormGroup una instancia existente (se puede crear uno en su clase).

No entiendo por qué estoy recibiendo este error porque tengo una instancia formGroup.

Este es mi HTML:

<form [formGroup]=singleRecipientForm>
    <textarea #textInput placeholder=user e-mail formControlName=email></textarea>
    <button type=submit (click)=sendMailTextInput(textInput.value)>Send invite </button>
</form

Y mi manuscrito se ve así:

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.singleRecipientForm = this.formBuilder.group({
      email: ['', [Validators.required]],
    });
}

No tengo ni idea de por qué este error está apareciendo.

Publicado el 18/12/2018 a las 11:02
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
1

No ha cerrado la etiqueta de forma correcta ().

 <form [formGroup]="singleRecipientForm">
        <textarea #textInput placeholder="user e-mail" formControlName="email"></textarea>
        <button type="submit" (click)="sendMailTextInput(textInput.value)">Send invite </button>
    </form>

Si ese no es el problema, por favor, compruebe que haya importado el reactiveformsmodule en sus module.ts

Respondida el 18/12/2018 a las 11:08
fuente por usuario

votos
1

Aparte de la etiqueta que faltan, cuando se utiliza formas reactivas, que no es necesario ref plantilla para obtener el valor de entrada.

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
this._buildForm();

}
private _buildForm(): void {
        this.singleRecipientForm = this.formBuilder.group({
      email: New FromControl('', Validators.required)
    });
}
public sendMailTextInput(): any {
console.log(this.singleRecipientForm.value)
}

y su html sería (click)="sendMailTextInput()"y luego hacer lo que quieras con la entrada de texto. Formas reactivos vienen con varios métodos que pueden facilitar su desarrollo (valueChanges (), ...)

Respondida el 18/12/2018 a las 15:22
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more