代码之家 › 专栏 › 技术社区 › AJ-

表单生成器-无法读取未定义的“get”属性,验证程序有问题

formbuilder angular6 forms angular javascript

AJ- · 技术社区 · 6 年前

我的Angular6项目中有一个表单生成器表单,验证程序有问题。

我想我知道问题是什么,但不知道如何解决。我有一个自定义验证器(不是真正的自定义验证器,我使用min()和max()和一个自定义变量进行检查)

可能表单是在这些值之前初始化的。

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 是两个下拉列表,您可以在其中选择一个数字。

我想要实现的是:

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)]]

所以基本上不能低于 最低分 最低分 不能高于 最高得分 !

但这给了我一个错误:

TypeError: Cannot read property 'get' of undefined

所以我想那是因为 this.myForm.get("max_score").value 初始化窗体生成器时不可访问。

我该怎么解决?这些值在我的表单中是可选的,因此它们在开始时没有值是正确的,我只想进行一个检查,以避免选择的最小值高于最大值

我甚至试着把这个放在我的表格里。。。。在函数中:

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)]]

但我也犯了同样的错误!

这个问题的解决方法是什么?

3 回复 | 直到 6 年前

Lia 6 年前

应该是:

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

Giwrgos Lampadaridis 6 年前

(keyup)="checkMinMax()" 在html中的min和max上。在checkMinMax函数中,可以检查 this.myForm.get("max_score").value 和 this.myForm.get("min_score").value 要么像你在评论中提到的那样用*ngIf显示一条消息,要么如果用户的输入超过最小值或最大值,就强制使其与另一个相同。(或两者)。

marc_s 5 年前

创建窗体时,将值传递给验证器数组,这些值仅在创建时传递。

所以如果你用

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);
    }
  };
}

客户验证程序 您正在访问动态访问其控件的数据。

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

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

notMatching 错误,但您可以打印所有可用的错误

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

哪里 f

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