Question

我正在使用模板驱动的表单方法。我想在ngModelGroup上添加自定义验证。即，如果一个字段被填充，则所有字段也必须被填充。

<form #f="ngForm">
      <div ngModelGroup="address">
        <input type="email" name="house_number" class="form-control" ngModel>
        <input type="email" name="street_number" class="form-control" ngModel>
      </div>
</form>

我在线搜索，仅发现诸如this之类的文章，它们仅在输入级别而不是ngModelGroup级别谈论自定义验证。其他文章讨论了我无法实现的响应式表单。

任何帮助将不胜感激。

Answer 1

由于您处理的是模板驱动的表单，因此最好创建将验证器添加到您的地址组的指令：

@Directive({
  selector: '[ngModelGroup][requiredIfOneFilledValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => AddressValidator),
    multi: true
  }]
})
export class RequiredIfOneFilledValidator implements Validator {
  validate(group: AbstractControl): ValidationErrors | null {
    const controls = (group as FormGroup).controls; // we expect FormGroup here
    const controlNames = Object.keys(controls);
    const filledCount = controlNames.filter(name => !!controls[name].value).length;

    return filledCount > 0 && filledCount < controlNames.length ? { required: true } : null;
  }
}

现在，您可以轻松地在模板中使用此验证器：

<div ngModelGroup="address" requiredIfOneFilledValidator>

如果要检查组是否有效，只需使用模板引用变量：

<div ngModelGroup="address" requiredIfOneFilledValidator #addressGroup="ngModelGroup">
   ...
</div>
<p>Group valid? {{addressGroup.valid}}</p>

或者只是检查整个表单的状态：

Form valid? {{ f.valid }}

Ng-run Example

Answer 2

如果需要考虑创建新指令，则可以在现有组件中进行更改。您可以添加div以在html文件中向用户显示错误消息。

<form (ngSubmit)="validateData(f)" #f="ngForm">
<div  ngModelGroup="address">
<input type="email" name="house_number" class="form-control" required ngModel>
<div style="color:red;display:none;" id="errorMsg">
This field cannot be empty
</div>
<input type="email" name="street_number" class="form-control" ngModel>
</div>
<button type="submit">Submit</button>
</form>

在组件部分，您可以根据需要访问表单值并显示/隐藏验证。

address:any;
validateData(f) {

 console.log("Form Values : "+ f.value);

 this.address = f.value.address;

 if(!this.address.house_number){
    //code to show/hide the message
    var x = document.getElementById("errorMsg");
    x.style.display="block";
 }

 //to check form validity
 if (f.valid) {
    //do something 
  }

 }
}

如何在模板驱动的表单中为ngModelGroup添加自定义验证

2 个答案: