Angular 7 FormControlName dá erro consola

votos
0

Eu tenho um formulário reativa na minha página, mas dá um erro que se parece com isso:

ERRO Erro: formControlName deve ser utilizado com a directiva um pai formGroup. Você vai querer adicionar uma directiva formGroup e passá-lo uma instância FormGroup existente (você pode criar um em sua classe).

Eu não entendo por que eu estou recebendo este erro, porque eu tenho uma instância formGroup.

Este é o meu HTML:

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

E meu typescript parece com isso:

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

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

Eu não tenho idéia de por que esse erro está aparecendo.

Publicado 18/12/2018 em 11:02
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

Você não ter fechado a tag formulário corretamente ().

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

Se isso não é o problema, por favor, verifique de ter importado o reactiveformsmodule em seus module.ts

Respondeu 18/12/2018 em 11:08
fonte usuário

votos
1

Além do tag em falta, quando você estiver usando formas reativas, você não precisa de ref modelo para obter o 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)
}

e seu html seria (click)="sendMailTextInput()"e depois fazer o que quiser com a entrada de texto. Formas reativas vêm com número de métodos que podem facilitar o seu desenvolvimento (valueChanges (), ...)

Respondeu 18/12/2018 em 15:22
fonte usuário

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