Angular 2:遍历响应式表单控件

7 浏览
0 Comments

Angular 2:遍历响应式表单控件

我想要将 FormGroup 内的所有控件都标记为脏。

0
0 Comments

原因:问题的原因是因为在Angular 2中,表单可能具有嵌套的FormGroup和FormArray,而现有的解决方法不能完全解答这个问题。

解决方法:为了创建一个强大的解决方案,我们需要考虑到表单中可能存在的嵌套FormGroup和FormArray。下面是一个解决方法的示例代码:

public markControlsDirty(group: FormGroup | FormArray): void {
    Object.keys(group.controls).forEach((key: string) => {
        const abstractControl = group.controls[key];
        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
            this.markControlsDirty(abstractControl);
        } else {
            abstractControl.markAsDirty();
        }
    });
}

此解决方法使用了递归的方式,遍历表单中的所有控件,并将其标记为dirty。这样可以确保在嵌套的FormGroup和FormArray中的控件也能正确地被标记为dirty。

需要注意的是,instanceof在被TypeScript编译后是否仍然有效。instanceof不是一个特定于TypeScript的关键字,而是JavaScript的关键字。此外,class数据类型也不是特定于TypeScript的。

根据我的观点,这个答案应该是正确的解决方法。

0
0 Comments

问题的出现原因是:在使用Angular 2的响应式表单控件时,使用Object.keys(...)方法遍历控件时会出现一些问题,而使用for...in语句可以解决这个问题。然而,在使用TSLint时,它会提示"for (... in ...) statements must be filtered with an if statement (forin)"这个错误。

解决方法是:根据JavaScript的文档,可以通过添加if语句来过滤for...in语句的遍历。这样可以解决TSLint的错误提示。

另外,也某些情况下在Angular 14中使用Object.keys(form).forEach会报错,错误信息是:Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

我们可以通过使用for...in语句来遍历Angular 2的响应式表单控件,并且可以根据TSLint的提示来添加if语句进行过滤。在Angular 14中,需要注意使用Object.keys(form).forEach可能会引发错误。

0
0 Comments

问题出现的原因是在使用Object.keys方法遍历表单控件时,会出现无法调用表达式的错误。解决方法是使用this.form.controls[key].markAsDirty()代替this.form.get(key).markAsDirty()

在Angular 8+版本中,解决方法如下:

Object.keys(this.form.controls).forEach(key => {
  this.form.controls[key].markAsDirty();
});

另外,还有一位用户尝试使用Object.keys或者for in方法遍历表单控件,但是没有获得任何结果。然而,如果使用console.log(form.controls)输出表单控件,可以看到包含在对象中的各种表单控件。对此感到困惑。

还有一位用户使用Angular 5版本时发现,markAsDirty()markAsTouched()无法递归到任何子表单组中。他将上述代码拆分成一个递归函数,并在任何子表单组上调用该函数。在当前的Angular Material UI项目中,如果用户从未触摸必填元素,则在用户尝试提交表单时调用该函数来标记这些元素。

总之,通过阅读问题和回答,我们了解到问题的原因是在遍历表单控件时无法调用表达式。解决方法是使用正确的方法来遍历并操作表单控件。

0