Форма не работает, проблема с formGroup - PullRequest
0 голосов
/ 24 февраля 2019

Я пытаюсь заполнить форму входа, но не могу исправить эту ошибку

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

Я новичок в Angular и совершенно не понимаю, что не так с моим кодом.

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

Компонент:

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

Я сделал несколько форм до них, и у меня не было больше проблем.Самым большим сюрпризом для меня является тот факт, что я не могу найти решение в Интернете этой проблемы.

Ответы [ 3 ]

0 голосов
/ 24 февраля 2019

Импорт обоих модулей FormsModule и ReactiveFormsModule

0 голосов
/ 24 февраля 2019

Просто импортируйте ReactiveFormsModule после BrowserModule

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

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }
0 голосов
/ 24 февраля 2019

Вы, вероятно, забыли импортировать ReactiveFormsModule в AppModule:

@NgModule({
  imports: [
    ...
    ReactiveFormsModule,
    ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...