1
votes

Le formulaire ne fonctionne pas, problème avec formGroup

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.


4 commentaires

Essayez d'importer FormsModule et ReactiveFormsModule


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?


3 Réponses :


1
votes

Vous avez probablement oublié d'importer ReactiveFormsModule dans AppModule:

@NgModule({
  imports: [
    ...
    ReactiveFormsModule,
    ...


1 commentaires

J'ai oublié ReactiveFormsModule, merci pour la réponse!



1
votes

Importez à la fois les modules FormsModule et ReactiveFormsModule


0 commentaires

3
votes

Importez simplement le ReactiveFormsModule après BrowserModule

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }


0 commentaires