Kątowe 7 FormControlName daje błąd konsoli

głosy
0

Mam reaktywną formę na mojej stronie internetowej, ale daje błąd, który wygląda tak:

ERROR: formControlName musi być używany z dyrektywą rodzica formGroup. Będziemy chcieli, aby dodać dyrektywę formGroup i przekazać je istniejącej instancji FormGroup (można stworzyć jeden w swojej klasie).

Nie rozumiem, dlaczego otrzymuję ten błąd, bo mam instancję formGroup.

To jest mój HTML:

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

A mój maszynopis wygląda następująco:

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

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

Nie mam pojęcia, dlaczego ten błąd pojawia się.

Utwórz 18/12/2018 o 11:02
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
1

Nie zostały prawidłowo zamknięte tag formularz ().

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

Jeśli to nie problem, proszę sprawdzić zaimportowaniu reactiveformsmodule w swoim module.ts

Odpowiedział 18/12/2018 o 11:08
źródło użytkownik

głosy
1

Oprócz tagu brakuje, gdy używasz formy reaktywny, nie trzeba szablonu ref uzyskać wartość sygnału wejściowego.

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

a html byłoby (click)="sendMailTextInput()"a następnie zrobić cokolwiek chcesz z wprowadzania tekstu. Reaktywnych form pochodzą z wielu metod, które mogą złagodzić swój rozwój (valueChanges (), ...)

Odpowiedział 18/12/2018 o 15:22
źródło użytkownik

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