Question

我开始创建表单：

ngOnInit() {
    this.pointForm = new FormGroup({
      X: new FormControl(null, [Validators.required, this.ValidatorX]),
      Y: new FormControl(null, [Validators.required, this.ValidatorY]),
    })
  }

我的HTML片段：

<mat-form-field>
<input type="text" name="X" id="X"
                         placeholder="X" matInput [(ngModel)]="X"
                         formControlName="X" (blur)="transformCoordinates(); ifXisBlur()" (click)="outputCoordinateX()"
                         required>
                  <mat-error *ngIf="pointForm.get('X').errors && pointForm.get('X').errors['required']">Required</mat-error>
                  <mat-error *ngIf="pointForm.get('X').errors && pointForm.get('X').errors['unproper']">Unproper</mat-error>

    </mat-form-field>

我定义了两个变量，用于检查正确性：

validX: string = '10';
validY: string = '10';

我创建了自己的验证器：ValidatorX和ValidatorY。当varible validX或validY为0时，它应该返回错误：

ValidatorX(): ValidationErrors{
    if (this.validX === '0'){
      return {unproper: true};
    }
  }

  ValidatorY(): ValidationErrors {
    if (this.validY === '0'){
      return {unproper: true};
    }
  }

在我的项目中，我有一个函数，它检查X和Y的值（这个函数非常复杂，对于这个问题，我简化了它）：

transformCoordinates() {
    let X = this.pointForm.value.X;
    let Y = this.pointForm.value.Y;

    if (Y >= -90) {
      this.validY = '1';
      if (X >= -180) {
        this.validX = '1';
      }
      else {
        this.validX = '0';
      }
    }
    else {
      this.validY = '0';
    }
  }

当我启动我的应用程序时，出现错误：ERROR TypeError: Cannot read property 'validX' of undefined

我不明白，为什么？在一开始，我特意将这些变量的值定义为字符串'10'

Angular 4材质验证器

0 个答案: