代码之家 › 专栏 › 技术社区 › esseara

角度验证器不工作

angular-forms angular

esseara · 技术社区 · 7 年前

看法

<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(),

    });

1 回复 | 直到 7 年前

Pengyy 7 年前

你在胡乱使用 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代码更改为以下任一方式将解决您的问题:

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(),

});