37

我有一个 Angular 2 应用程序，它使用该ReactiveForms模块来管理使用自定义验证器的表单。验证器接收到一个FormControl对象。我有一些输入字段可以使用相同的自定义验证器，前提是我在FormControl传递给验证器时知道字段的名称。

我找不到任何FormControl公开输入字段名称的方法或公共属性。当然，这很简单，可以看出它的价值。下面显示了我想如何使用它：

public asyncValidator(control: FormControl): {[key: string]: any} {
  var theFieldName = control.someMethodOfGettingTheName(); // this is the missing piece

  return new Promise(resolve => {
      this.myService.getValidation(theFieldName, control.value)
        .subscribe(
          data => {
            console.log('Validation success:', data);
            resolve(null);
          },
          err => {
            console.log('Validation failure:', err);
            resolve(err._body);
          });
    });
  }
4

7 回答 7

38

扩展 Radim Köhler 的答案。这是编写该函数的更短的方法。

getControlName(c: AbstractControl): string | null {
    const formGroup = c.parent.controls;
    return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
}
于 2017-09-17T01:36:36.653 回答
25

今天我们可以使用.parent属性["_parent"] （见下文）：

export const getControlName = (control: ng.forms.AbstractControl) =>
{
    var controlName = null;
    var parent = control["_parent"];

    // only such parent, which is FormGroup, has a dictionary 
    // with control-names as a key and a form-control as a value
    if (parent instanceof ng.forms.FormGroup)
    {
        // now we will iterate those keys (i.e. names of controls)
        Object.keys(parent.controls).forEach((name) =>
        {
            // and compare the passed control and 
            // a child control of a parent - with provided name (we iterate them all)
            if (control === parent.controls[name])
            {
                // both are same: control passed to Validator
                //  and this child - are the same references
                controlName = name;
            }
        });
    }
    // we either found a name or simply return null
    return controlName;
}

现在我们准备调整我们的验证器定义

public asyncValidator(control: FormControl): {[key: string]: any} {
  //var theFieldName = control.someMethodOfGettingTheName(); // this is the missing piece
  var theFieldName = getControlName(control); 
  ...

.parent以后，["_parent"]现在

目前（今天，现在），当前版本是：

2.1.2 (2016-10-27)

但是在这个问题之后：feat(forms): make 'parent' a public property of 'AbstractControl'

正如这里已经说过的

2.2.0-beta.0 (2016-10-20)

特征

  • forms: 使 'parent' 成为 'AbstractControl' (#11855) (445e592) 的公共属性
  • ...

我们可以稍后将其更改["_parent"]为.parent

于 2016-11-02T14:44:09.273 回答
6

从 Angular 4.2.x 开始，您可以使用 public parent属性访问 aFormControl的父级FormGroup（及其控件） ：

private formControl: FormControl;

//...

Object.keys(this.formControl.parent.controls).forEach((key: string) => {
  // ...
});
于 2017-07-15T18:59:56.253 回答
4

你有两个选择：

在Attribute装饰器的帮助下：

constructor(@Attribute('formControlName') public formControlName) {}

在Input装饰器的帮助下：

@Input() formControlName;

要使用它，您的验证当然需要成为指令。

于 2016-11-01T15:15:55.583 回答
2

您可以在验证器中设置控件名称：

this.form = this.fb.group({
     controlName: ['', 
         [
            Validators.required, 
            (c) => this.validate(c, 'controlName')
         ]
      ]
});

接着：

validate(c: FormControl, name) {
    return name === 'controlName' ? {invalid: true} : null;
}
于 2018-11-19T13:32:02.923 回答
0

已接受答案的单行变体（也解决了我在评论中提到的错误）。

getName(control: FormControl): string | null {
  return Object.entries(control.parent?.controls ?? []).find(([_, value]) => value === control)?.[0] ?? null;
}
于 2022-02-15T17:07:45.213 回答
0

不完全是您想要的，但您可以像在某些示例中那样动态创建验证器。

喜欢

typeBasedValidator(controlName: string): ValidatorFn {
  return(control: AbstractControl): {[key: string]: any} => {
     // Your code using controlName to validate
     if(controlName == "something") { 
       doSomething(); 
     } else { 
       doSomethingElse(); 
     }
  }
}

然后在创建表单时使用验证器，传递控件名称，如

于 2017-03-01T23:15:25.413 回答