表单验证中的 Angular 5 ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个如下所列的表格。 但是，当我进入包含此表单的页面时，它无法正确加载。 值不正确，控制台给出ExpressionChangedAfterItHasBeenChecked错误。 所有值都与最后一个字段相同： darts_thrown 。 'player'是数据库中的一个对象，当我记录它们时这些值是正确的，但不知何故它们在某处发生了变化。

<div class="container">
  <ngx-flash-messages></ngx-flash-messages>

  <form *ngIf="player != null" (ngSubmit)="onSubmit()" [(formGroup)]="userForm">
    <div class="form-group row">
      <label for="name">Name</label>
      <input class="form-control" required name="name" formControlName="name" type="text" id="name" [(ngModel)]="player.name">
    </div>

    <div *ngIf="name.invalid && (name.dirty || name.touched)"
         class="alert alert-danger">
      <div *ngIf="name.errors.required">
        Name can't be empty.
      </div>
      <div *ngIf="name.errors.minLength">
        Name must be at least two characters.
      </div>
      <div *ngIf="name.errors.maxLength">
        Name must be less than thirty characters.
      </div>
    </div>

    <div class="form-group row">
      <label for="email">Email</label>
      <input class="form-control" required name="email" formControlName="name" type="text" id="email" [(ngModel)]="player.email">
    </div>

    <div class="form-group row">
      <label for="games_won">Games won</label>
      <input class="form-control" required name="games_won" formControlName="name" type="number" id="games_won" [(ngModel)]="player.games_won">
    </div>

    <div class="form-group row">
      <label for="darts_thrown">Darts thrown</label>
      <input class="form-control" required name="darts_thrown" formControlName="name" type="number" id="darts_thrown" [(ngModel)]="player.darts_thrown">
    </div>

    <div class="row">
      <input class="btn btn-primary" style="color: #fff !important;" type="submit" value="Verander de gebruiker!">
    </div>
  </form>
</div>

组件.ts：

    import {Component} from '@angular/core';
    import {PlayerService} from '../../player.service';
    import {ActivatedRoute, Router} from '@angular/router';
    import {FlashMessagesService} from 'ngx-flash-messages';
    import {FormControl, FormGroup, Validators} from '@angular/forms';

    @Component({
      selector: 'app-player-edit',
      templateUrl: './player-edit.component.html',
      styleUrls: ['./player-edit.component.scss']
    })
    export class PlayerEditComponent {
      player: any;
      userForm: any;

      constructor(private playerService: PlayerService, private messageService: FlashMessagesService, route: ActivatedRoute, router: Router) {
        if (route.snapshot.params.id) {
          playerService.getPlayer(route.snapshot.params.id).subscribe(data => {
            if (data['status'] === 'success') {
              this.player = data['user'];
              this.userForm = new FormGroup({
                'name': new FormControl(this.player.name, [Validators.minLength(2), Validators.maxLength(30),
                  Validators.required]),
                'email': new FormControl(this.player.email, [Validators.minLength(2), Validators.maxLength(30),
                  Validators.email, Validators.required]),
                'games_won': new FormControl(this.player.games_won, [Validators.required, Validators.pattern('[0-9]*')]),
                'darts_thrown': new FormControl(this.player.darts_thrown, [Validators.required, Validators.pattern('[0-9]*')])
              });
            } else {
              router.navigate(['/players/index']);
            }
          });
        } else {
          router.navigate(['/players/index']);
        }
      }

      get name() { return this.userForm.get('name'); }
      get email() { return this.userForm.get('email'); }
      get games_won() { return this.userForm.get('games_won'); }
      get darts_thrown() { return this.userForm.get('darts_thrown'); }
    }

Answer 1

重要评论应该在回答中，请给 Thirueswaran Rajagopalan 积分

如果我是正确的，你是通过 Reactive-Forms 做事，所以你不需要使用 [(ngModel)]。 请查看 angular.io/guide/reactive-forms