Winkel 7 FormControlName gibt Konsole Fehler

stimmen
0

Ich habe eine reaktive Form auf meiner Webseite, aber es gibt einen Fehler, der wie folgt aussieht:

ERROR Fehler: formControlName müssen bei einem Elternteil formGroup Richtlinie verwendet werden. Sie wollen eine formGroup Richtlinie hinzuzufügen und es eine vorhandene FormGroup Instanz übergeben (Sie in Ihrer Klasse erstellen können).

Ich verstehe nicht, warum ich diese Störung erhalte, weil ich eine formGroup Instanz haben.

Das ist mein HTML:

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

Und mein Typoskript sieht wie folgt aus:

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

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

Ich habe keine Ahnung, warum dieser Fehler erscheint.

Veröffentlicht am 18/12/2018 um 11:02
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
1

Neben den fehlenden Tag, wenn Sie Reactive Formulare verwenden, benötigen Sie keine Vorlage ref Eingabewert zu erhalten.

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

und Ihre HTML wäre (click)="sendMailTextInput()"und dann tun , was immer Sie mit dem Text eingeben möchten. Reaktive Formen kommen mit der Anzahl der Methoden , die Ihre Entwicklung erleichtern können (valueChanges (), ...)

Beantwortet am 18/12/2018 um 15:22
quelle vom benutzer

stimmen
1

Sie haben nicht die Form-Tag richtig () geschlossen.

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

Wenn das nicht das Problem ist, bitte überprüfen Sie die reactiveformsmodule in Ihrem module.ts importiert haben

Beantwortet am 18/12/2018 um 11:08
quelle vom benutzer

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