J'essaie de créer un formulaire de connexion, mais je ne peux pas corriger cette erreur
@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.sass'] }) export class LoginComponent implements OnInit { form: FormGroup; loading = false; submitted = false; returnUrl: string; error = ''; constructor( private formBuilder: FormBuilder, private route: ActivatedRoute, private router: Router, private authenticationService: AuthenticationService ) { this.createForm(); } ngOnInit() { this.authenticationService.logout(); this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; } createForm() { this.form = this.formBuilder.group({ username: ['', Validators.required], password: ['', Validators.required] }); } get f() { return this.form.controls; } onSubmit() { this.submitted = true; if (this.form.invalid) { return; } this.loading = true; this.authenticationService.login(this.f.username.value, this.f.password.value) .pipe(first()) .subscribe( () => { this.router.navigate([this.returnUrl]); }, error => { this.error = error; this.loading = false; }); } }
Je suis nouveau dans Angular et je ne comprends absolument pas ce qui ne va pas avec mon code .
<form [formGroup]="form" (ngSubmit)="onSubmit()"> <fieldset> <legend>Login</legend> <div class="form-field"> <label>Email: <input name="username" formControlName="username" type="email"> </label> </div> <div class="form-field"> <label>Password: <input name="password" formControlName="password" type="password"> </label> </div> </fieldset> <div class="form-buttons"> <button class="button button-primary" (click)="onSubmit()">Login </button> </div> </form>
Composant:
Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<form [ERROR ->][formGroup]="form" (ngSubmit)="onSubmit()"> <fieldset> <legend>Login</legend> "): ng:///AppModule/LoginComponent.html@0:6
J'ai fait quelques formulaires avant eux et je n'ai pas eu de plus gros problèmes. La plus grande surprise pour moi est le fait que je ne trouve pas de solution sur Internet à ce problème.
3 Réponses :
Vous avez probablement oublié d'importer ReactiveFormsModule
dans AppModule
:
@NgModule({ imports: [ ... ReactiveFormsModule, ...
J'ai oublié ReactiveFormsModule, merci pour la réponse!
Importez à la fois les modules FormsModule
et ReactiveFormsModule
Importez simplement le ReactiveFormsModule après BrowserModule
import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ // other imports ... ReactiveFormsModule ], }) export class AppModule { }
Essayez d'importer
FormsModule
etReactiveFormsModule
J'ai oublié ReactiveFormsModule - merci!
J'ai ajouté le commentaire en guise de réponse. Pouvez-vous s'il vous plaît voter pour et le marquer comme réponse afin qu'il aide les autres
Salut, je suis le premier qui vous a dit d'importer le module reactiveform. Et ce n'est ni voté ni accepté. Pouvez-vous expliquer?