Angular 验证器不工作
Angular validators not working
我正尝试按照教程在我的表单中实施 angular 验证器,但验证被忽略了。这是我的代码:
查看
<div class="form-group row">
<label for="inputLocalita" class="col-sm-2 col-form-label col-form-label-sm">Località</label>
<label *ngIf="!edit" class="col-sm-10 col-form-label col-form-label-sm grey" id="inputLocalita">{{immobile.localita}}</label>
<div *ngIf="edit" class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="inputLocalita" formControlName="localita" placeholder="Località">
</div>
<div *ngIf="imm.controls.localita.errors && (imm.controls.localita.dirty || imm.controls.localita.touched)">
<p *ngIf="imm.controls.localita.errors.required">Field is required</p>
<p *ngIf="imm.controls.localita.errors.minlength">Field must be 8 characters long</p>
</div>
</div>
控制器
ngOnInit() {
this.imm = new FormGroup({
comune: new FormControl(),
provincia: new FormControl(),
comuneObj: new FormControl(),
cap: new FormControl(),
indirizzo: new FormControl(),
civico: new FormControl(),
localita: new FormControl([
Validators.minLength(4),
Validators.required]),
destinazioneUso: new FormControl(),
destinazioneUsoAltro: new FormControl(),
destinazioneUsoPrincipale: new FormControl(),
destinazioneUsoSecondaria: new FormControl(),
});
我错过了什么吗?谢谢指点。
你在乱用 formControl
。创建自定义 FormControl
时,请使用以下语法(请参阅 FormControl 的 API):
// for single validator
customControl = new FormControl('value', Validators.maxLength(5));
// for multiple validators(with Validators.compose)
customControl = new FormControl('value', Validators.compose([Validators.minLength(4), Validators.required]));
// or(without Validators.compose)
customControl = new FormControl('value', Validators.compose([Validators.minLength(4), Validators.required]));
将您的 formGroup 代码更改为以下任一方式将解决您的问题:
选项 1: 不使用 new FormControl()
创建 formGroup
this.imm = new FormGroup({
comune: [],
provincia: [],
comuneObj: [],
cap: [],
indirizzo: [],
civico: [],
localita: ['', Validators.compose([Validators.minLength(4), Validators.required])],
destinazioneUso: [],
destinazioneUsoAltro: [],
destinazioneUsoPrincipale: [],
destinazioneUsoSecondaria: [],
});
选项 2: 更正 formControl 部分语法。
this.imm = new FormGroup({
comune: new FormControl(),
provincia: new FormControl(),
comuneObj: new FormControl(),
cap: new FormControl(),
indirizzo: new FormControl(),
civico: new FormControl(),
localita: new FormControl('', Validators.compose([Validators.minLength(4), Validators.required])),
destinazioneUso: new FormControl(),
destinazioneUsoAltro: new FormControl(),
destinazioneUsoPrincipale: new FormControl(),
destinazioneUsoSecondaria: new FormControl(),
});
我正尝试按照教程在我的表单中实施 angular 验证器,但验证被忽略了。这是我的代码:
查看
<div class="form-group row">
<label for="inputLocalita" class="col-sm-2 col-form-label col-form-label-sm">Località</label>
<label *ngIf="!edit" class="col-sm-10 col-form-label col-form-label-sm grey" id="inputLocalita">{{immobile.localita}}</label>
<div *ngIf="edit" class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="inputLocalita" formControlName="localita" placeholder="Località">
</div>
<div *ngIf="imm.controls.localita.errors && (imm.controls.localita.dirty || imm.controls.localita.touched)">
<p *ngIf="imm.controls.localita.errors.required">Field is required</p>
<p *ngIf="imm.controls.localita.errors.minlength">Field must be 8 characters long</p>
</div>
</div>
控制器
ngOnInit() {
this.imm = new FormGroup({
comune: new FormControl(),
provincia: new FormControl(),
comuneObj: new FormControl(),
cap: new FormControl(),
indirizzo: new FormControl(),
civico: new FormControl(),
localita: new FormControl([
Validators.minLength(4),
Validators.required]),
destinazioneUso: new FormControl(),
destinazioneUsoAltro: new FormControl(),
destinazioneUsoPrincipale: new FormControl(),
destinazioneUsoSecondaria: new FormControl(),
});
我错过了什么吗?谢谢指点。
你在乱用 formControl
。创建自定义 FormControl
时,请使用以下语法(请参阅 FormControl 的 API):
// for single validator
customControl = new FormControl('value', Validators.maxLength(5));
// for multiple validators(with Validators.compose)
customControl = new FormControl('value', Validators.compose([Validators.minLength(4), Validators.required]));
// or(without Validators.compose)
customControl = new FormControl('value', Validators.compose([Validators.minLength(4), Validators.required]));
将您的 formGroup 代码更改为以下任一方式将解决您的问题:
选项 1: 不使用 new FormControl()
this.imm = new FormGroup({
comune: [],
provincia: [],
comuneObj: [],
cap: [],
indirizzo: [],
civico: [],
localita: ['', Validators.compose([Validators.minLength(4), Validators.required])],
destinazioneUso: [],
destinazioneUsoAltro: [],
destinazioneUsoPrincipale: [],
destinazioneUsoSecondaria: [],
});
选项 2: 更正 formControl 部分语法。
this.imm = new FormGroup({
comune: new FormControl(),
provincia: new FormControl(),
comuneObj: new FormControl(),
cap: new FormControl(),
indirizzo: new FormControl(),
civico: new FormControl(),
localita: new FormControl('', Validators.compose([Validators.minLength(4), Validators.required])),
destinazioneUso: new FormControl(),
destinazioneUsoAltro: new FormControl(),
destinazioneUsoPrincipale: new FormControl(),
destinazioneUsoSecondaria: new FormControl(),
});