angular - 获取表单控件的名称

Question

我正在使用角度的反应形式，我需要将开始日期“开始日期”与结束日期“结束日期”进行比较，这两个控件都在“dateLessThan”函数中进行了验证，但问题是我不知道如何要求控制正在评估

//Some stuff
public fechaInicio = new FormControl('', [
    Validators.required    
    , this.dateLessThanTo

]);
public fechaFin = new FormControl('', [
    Validators.required     
    , this.dateLessThan
]);



 createForm() {
    this.contratoForm = this.formBuilder.group({    
        fechas: this.formBuilder.group({
            fechaInicio: this.fechaInicio,
            fechaFin: this.fechaFin
        }, { validator: this.dateLessThan('fechaInicio', 'fechaFin') }),          

    });
}

在这里，我需要知道比较日期的控件名称：

 dateLessThanTo(fieldControl: FormControl) {
    //
    //if (fechaInicio.value > FechaFin.value){
    //      return true;
    //}
    //else{
    //  return false;
    //  }

}

//Some stuff

score 7 · Accepted Answer

从控件中获取父组，然后与当前控件进行比较：

  dateLessThanTo(control: AbstractControl) { 
    let name = this.getName(control);

    ...
  }

  private getName(control: AbstractControl): string | null {
    let group = <FormGroup>control.parent;

    if (!group) {
      return null;
    }

    let name: string;

    Object.keys(group.controls).forEach(key => {
      let childControl = group.get(key);

      if (childControl !== control) {
        return;
      }

      name = key;
    });

    return name;
  }

score 4 · Accepted Answer

在您的自定义验证器中，您将获得formGroup fechas，因此您不需要从 TS 代码传递任何参数：

 createForm() {
    this.contratoForm = this.formBuilder.group({    
        fechas: this.formBuilder.group({
            fechaInicio: this.fechaInicio,
            fechaFin: this.fechaFin
        }, { validator: this.dateLessThanTo }),          

    });
}

并在您的自定义验证器中：

dateLessThanTo(group: FormGroup) {
   if (group.controls.fechaInicio.value > group.controls.fechaFin.value){
     return {notValid: true}
   }
   return null;
}

您需要null在有效时返回，并设置错误，例如notValid在无效时。

score 2 · Accepted Answer

在您的组件中，您可以添加一个像这样的自定义验证器

static customValidator(control: AbstractControl): { [key: string]: any } {
const controlName = (Object.keys(control.parent.controls).find(key => control.parent.controls[key] === control));
if (control.value === 0) {
  return {key: {error: 'invalid'}};
}
return null; }

在 controlName 中，您将拥有控件的名称。

score 0 · Accepted Answer

您只需要这样做，您可以FormControl通过使用 .get() 方法提取表单中的个人来检查它。

contratoForm.get('fechaInicio').value 


 dateLessThanTo(fieldControl: FormControl) {
   let va= fieldControl.get('fechaInicio').value ;
   let va1 = fieldControl.get('FechaFin').value ; 
}

在这里检查：https ://angular.io/guide/reactive-forms#inspect-formcontrol-properties

score 0 · Accepted Answer

你可以这样做：

Object.getOwnPropertyNames(this.contratoForm['controls']['fechas']['controls']).map((key: string) => { 
// Something like this. Not sure how your form looks like

angular - 获取表单控件的名称

5 回答 5

Related

Reference