Question

我有一个带有html页面的Ionic项目。该页面具有以下形式：

<form [formGroup]="configureLeagueForm">
  <ion-item>
    <ion-label  position="floating">TEXT</ion-label>
    <ion-input type="number" formControlName="roundsQuantity" ></ion-input>
  </ion-item>
  <ion-item *ngIf="!configureLeagueForm.controls.roundsQuantity.valid  && (configureLeagueForm.controls.roundsQuantity.dirty || submitAttempt)">
      <p [class.invalid]="!configureLeagueForm.controls.roundsQuantity.valid  && (configureLeagueForm.controls.roundsQuantity.dirty || submitAttempt)" >TEXT IF ERROR .</p>
  </ion-item>
</form>

.ts文件

this.configureLeagueForm = this.formBuilder.group({
  roundsQuantity: [1, Validators.compose([Validators.min(1), Validators.max(100), ConfigureChampionshipFormValidator.roundsQuantity])],
});

现在，我的验证者

export class ConfigureChampionshipFormValidator {

static roundsQuantity(group: FormGroup) : any{

var roundsQuantity = group.controls['roundsQuantity'].value;

if(String(roundsQuantity).trim() == ""){ // Just an example of validation

  group.controls['roundsQuantity'].setErrors({"mandatory_error": true});
  return { "mandatory_error": true };      
} else{
  return { "mandatory_error": false }; 
}
}

}

但是在代码的这一步：

group.controls['roundsQuantity'].value

我有未定义的group.controls。

那是在我打开页面时发生的。

Answer 1

您的验证器设置在FormControl（roundsQuantity）上。因此，它将作为参数接收的是表单控件。不是其父表单组。

Answer 2

您遇到了一些问题，例如在其他答案中提到的那样，您的自定义验证程序正在接收formcontrol，而不是整个组。

第二，如果值通过验证，则您的自定义验证器应返回null。 null在验证程序中被视为有效。因此，将您的自定义验证器更改为：

export class ConfigureChampionshipFormValidator {
  static roundsQuantity(roundsQuantity: AbstractControl): any {
    if (!roundsQuantity.value) {
      return { "mandatory_error": true };
    } 
    return null;
  }
}

Pure Angular DEMO

FormGroup.controls在自定义验证器中未定义

2 个答案: