Angulaire 7 FormControlName donne l'erreur de la console

voix
0

J'ai une forme réactive sur ma page Web, mais il donne une erreur qui ressemble à ceci:

ERREUR Erreur: formControlName doit être utilisé avec la directive d'un parent. Vous souhaitez ajouter une directive formGroup et transmettre une instance de FormGroup existante (vous pouvez en créer un dans votre classe).

Je ne comprends pas pourquoi je reçois cette erreur parce que j'ai une instance formGroup.

Ceci est mon HTML:

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

Et mon tapuscrit ressemble à ceci:

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

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

Je n'ai pas la moindre idée de la raison pour laquelle cette erreur apparaît.

Créé 18/12/2018 à 11:02
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Vous n'avez pas fermé correctement la balise form ().

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

Si ce n'est pas la question, s'il vous plaît vérifier que vous avez importé le reactiveformsmodule dans vos module.ts

Créé 18/12/2018 à 11:08
source utilisateur

voix
1

Outre la balise manquante, lorsque vous utilisez des formulaires réactifs, vous n'avez pas besoin ref modèle pour obtenir la valeur d'entrée.

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

et votre code html serait (click)="sendMailTextInput()"puis faire ce que vous voulez avec l'entrée de texte. Formes réactives viennent avec nombre de méthodes qui peuvent faciliter votre développement (valueChanges (), ...)

Créé 18/12/2018 à 15:22
source utilisateur

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