表单生成器 - 无法读取未定义的属性“获取”，验证器存在问题

Question

我的 Angular 6 项目中有一个 Form Builder 表单，但我遇到了验证器问题。

我想我知道问题出在哪里，但不知道如何解决。 我有一个自定义验证器（不是真正的自定义，我使用 min() 和 max() 以及自定义变量进行检查）

并且可能在这些值之前初始化表单。

表单在构造函数之前声明（我尝试将其移入构造并移入ngOnInit，结果相同）

myForm = this.fb.group({
        title: [""],
        date: [""],
        max_score: [, [Validators.required, Validators.max(6), Validators.min(1)]],
        min_score: [, [Validators.required, Validators.max(6), Validators.min(1)]]
});

constructor(private fb: FormBuilder) {}

像这样一切正常，即使是验证器。 max_score 和 min_score 是 2 个下拉菜单，您可以在其中选择一个数字。

我想要实现的是：

max_score: [, [Validators.required, Validators.max(6), Validators.min(this.myForm.get("min_points").value)]],
min_score: [, [Validators.required, Validators.max(this.myForm.get("max_score").value), Validators.min(1)]]

所以基本上max_score不能低于min_score，min_score不能高于max_score！

但这给了我错误：

TypeError: Cannot read property 'get' of undefined

所以我猜这是因为在初始化表单构建器时无法访问this.myForm.get("max_score").value。

我该如何解决这个问题？这些值在我的表单中是可选的，因此它们在开始时没有值是正确的，我只想进行检查以避免选择高于 max_value 的 min_value

我什至尝试将 this.myForm.get.... 放在一个函数中：

getMaxPoints(): number {
        if (this.myForm.get("max_score").value) {
            return this.myForm.get("max_score").value;
        } else return null;
    }

然后

 min_score: [, [Validators.required, Validators.max(this.getMaxPoints()), Validators.min(1)]]

但我得到了同样的错误！

解决此问题的方法是什么？

Answer 1

创建表单时，您将值传递给验证器数组，这些值仅在创建时传递。

所以如果你使用像

这样的表达式

Validators.max(this.myForm.get("max_points").value)

您正在创建表单期间进行评估。所以myForm 变量仍然是未定义的。

尝试使用一些变量而不是像这样访问myForm 属性：

minVal: number = 5;
maxVal: number = 5;

max_score: [, [Validators.required, Validators.max(6), Validators.min(minVal)]],
min_score: [, [Validators.required, Validators.max(maxVal), Validators.min(1)]]

要验证从表单中获取某些参数的数据，您应该使用来自this.fb.group() 的额外参数

你可以试试这样的：

myForm = this.fb.group({
        title: [""],
        date: [""],
        max_score: [, [Validators.required]],
        min_score: [, [Validators.required]]
},
{
       // THIS IS EXTRA!!!!!
       validator: [customValidator()]
});

这是customValidator的一个例子：

export function customValidator() {
  return (group: FormGroup) => {
    const minScore = group.controls['min_score'],
      maxScore = group.controls['max_core'],
      minPoints = group.controls['min_points'];

    if (/** some condition **/) {
      return minPoints.setErrors({'notMatching': true});
    } else {
      return minPoints.setErrors(null);
    }
  };
}

请注意，在 customValidator 中，您正在访问 myForm 数据，动态访问其控件。

然后在您的模板中，您需要显示错误，具体取决于

<div *ngIf="f.min_points.errors && f.min_points.errors.notMatching">NOT VALID</div>

我不记得notMatching 错误是否可用，但您可以使用

打印所有可用错误

<pre>{{ f.min_points.errors | json }</pre>

f 是一个方便的 getter 方法，如下所示：

 get f() {
    return this.myForm.controls;
  }

Answer 2

应该是：

public myForm:FormGroup; // you should do this
constructor(private fb: FormBuilder) {
     this.myForm = this.fb.group({
        title: [''],
        date: [''],
        max_score: ['', [Validators.required, Validators.max(6), Validators.min(1)]],
        min_score: ['', [Validators.required, Validators.max(6), Validators.min(1)]]
     });
}

并访问它：

this.myForm.get("max_score").value

或：

this.myForm.controls["max_score"].value

Answer 3

您可以在 html 中添加 (keyup)="checkMinMax()" 的最小值和最大值。在 checkMinMax 函数中，您可以检查 this.myForm.get("max_score").value 和 this.myForm.get("min_score").value 的内容，或者显示一条带有 *ngIf 的消息，就像您在评论中提到的那样，或者如果用户的输入超过它，则强制最小值或最大值与另一个相同. （ 或两者 ）。

此外，通过这样做，您可以使用所需的验证器。

Answer 4

我相信我有解决这个问题的简单方法。这是一个时间问题。我通过将成员变量定义为静态来使其工作。我的代码如下：

static numberOfVerses: number;
..
form: FormGroup = new FormGroup({
    suraID: new FormControl('', Validators.required),
    bVerseID: new FormControl('', Validators.required),
    eVerseID: new FormControl('', Validators.required),
    translatorID1: new FormControl(''),
  },validate);

// reference the static variable in the custom validation
validate(control: AbstractControl): { [key: string]: boolean } | null {

    const suraID = control.get('suraID');
    const bVerseID = control.get('bVerseID');
    const eVerseID = control.get('eVerseID');
    const translatorID1 = control.get('translatorID1');


    if (suraID && bVerseID && eVerseID && QuranSearchComponent.numberOfVerses) {
      if (bVerseID.value > QuranSearchComponent.numberOfVerses || eVerseID.value > QuranSearchComponent.numberOfVerses) {
        return { 'invalid_verse_number': true };
      }
    }

    if (suraID && bVerseID && eVerseID && translatorID1 &&
        bVerseID.value > eVerseID.value) {

        return { 'invalid_verse_range': true };
    }
    return null;
  }