Реактивная форма недействительна, даже если ввод значений в поля в угловых 6

Question

У меня есть форма для входа в систему и добавлены проверки в поля формы. После того, как пользователь ввел значение в поля формы, он должен обновить значение формы на экране, так как я отображаю form.value, а также он должен также отображать статус формы. И значение формы, и статус не меняются. Ничего не случилось.

HTML

<div class="jumbotron">
 <div class="container">
  <div class="row">
   <div class="col-md-6 offset-md-3">
    <h2>Login</h2>
    <form class='form' [formGroup]='loginForm' (ngSubmit)='onSubmit()' novalidate>
      <div class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" id="username" placeholder="Username"/>
          <div *ngIf="f.username.touched && f.username.errors" class="invalid-feedback">
              <div *ngIf="f.username.errors.required">Username is required</div>
          </div>
      </div>
      <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password"/>
          <div *ngIf="f.password.touched && f.password.errors" class="invalid-feedback">
              <div *ngIf="f.password.errors.required">Password is required</div>
          </div>
      </div>
      <div class="form-group">
          <label><input type="checkbox"> Remember me</label>
      </div>
      <div class="form-group">
        <button [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>
           </div>
          </form>
          <p>Form value: {{loginForm.value | json}}</p>
          <p>Form value: {{loginForm.status | json}}</p>
        </div>
      </div>
     </div>
   </div>

ts file

import { ObjectMethod } from '@babel/types/lib';
import { AuthService } from './../auth.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

 loginForm: FormGroup;
 returnUrl: string;

 constructor(
   private formBuilder: FormBuilder,
   private authService: AuthService) { }

 ngOnInit() {
  this.loginForm = this.formBuilder.group({
        username: ['', [ Validators.required]],
        password: ['', [ Validators.required]]
    });
}
//convenience getter for easy access to form fields
get f() {
  return this.loginForm.controls;
}

onSubmit() {
console.log(this.loginForm.value);
 /*Object.keys(this.loginForm.value).map(e => {
  console.log(">>>>>>>",this.loginForm.value[e]);
 });*/

 this.authService.getUserDetails();
}

} Из-за неправильной формы кнопка входа также не активирована. Пожалуйста, помогите мне в решении этой проблемы.

Answer 1

Вам необходимо добавить formControlName к вашим данным, таким как:

<div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" formControlName="username" placeholder="Username"/>
      <div *ngIf="f.username.touched && f.username.errors" class="invalid-feedback">
          <div *ngIf="f.username.errors.required">Username is required</div>
      </div>
  </div>

Для проверки правильности я бы использовал loginform.valid, это должно возвращать false, если форма недействительна