[英]Angular 5 ExpressionChangedAfterItHasBeenCheckedError on form validation
I have a form as listed below.我有一个如下所列的表格。 However, when I enter the page containing this form, it doesn't load properly.
但是,当我进入包含此表单的页面时,它无法正确加载。 The values are not correct and the console gives the
ExpressionChangedAfterItHasBeenChecked
Error.值不正确,控制台给出
ExpressionChangedAfterItHasBeenChecked
错误。 All the values are the same as the last field: darts_thrown
.所有值都与最后一个字段相同:
darts_thrown
。 The 'player'
is an object from the database and these values are correct when I log them, but somehow they change somewhere. '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>
The component.ts:组件.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'); }
}
Important comments should be in answer, please reward points to Thirueswaran Rajagopalan重要评论应该在回答中,请给 Thirueswaran Rajagopalan 积分
If Im correct you are doing things via Reactive-Forms, so you dont need to use [(ngModel)].如果我是正确的,你是通过 Reactive-Forms 做事,所以你不需要使用 [(ngModel)]。 Please check on angular.io/guide/reactive-forms
请查看 angular.io/guide/reactive-forms
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.