Angular 2：将验证器添加到ngModelGroup

问题描述：

我正在使用ngModelGroup指令将多个表单输入组合在一起。Angular 2：将验证器添加到ngModelGroup

在文档中（https://angular.io/docs/ts/latest/api/forms/index/NgModelGroup-directive.html）我看到有一个validators: any[]属性。

这是否意味着我可以添加一个自定义验证器函数，该函数仅验证ngModelGroup？如果是这样，我该如何使用它？

这会很棒，因为我想检查是否至少有一个ngModelGroup中的复选框被选中。我不能使用required，因为那意味着全部复选框是必需的。我在文档中找不到任何关于此的内容，或者我在错误的地方看到了什么？

答

这完全可能与ngModelGroup和用于验证的自定义指令。理解这种工作原理的关键是：ngModelGroup

创建FormGroup实例并将其绑定到DOM元素。

首先，我们要建立我们的指令，它与什么特别漂亮的样板事情：

@Directive({ 
    selector: '[hasRequiredCheckboxInGroup]', 
    providers: [{provide: NG_VALIDATORS, useExisting: HasRequiredCheckBoxInGroup, multi: true}] 
}) 
export class HasRequiredCheckBoxInGroup implements Validator, OnChanges { 
    private valFn = Validators.nullValidator; 

    constructor() { 
    this.valFn = validateRequiredCheckboxInGroup(); 
    } 

    validate(control: AbstractControl): {[key: string]: any} { 
    return this.valFn(control); 
    } 
}

我们的验证功能，我们把我们的关键知识ngModelGroup创建FormGroup并应用：

function validateRequiredCheckboxInGroup() : ValidatorFn { 
     return (group) => { //take the group we declare in the template as a parameter 
     let isValid = false; //default to invalid for this case 
     if(group) { 
      for(let ctrl in group.controls) { 
      if(group.controls[ctrl].value && typeof group.controls[ctrl].value === 'boolean') { // including a radio button set might blow this up, but hey, let's be careful with the directives 
       isValid = group.controls[ctrl].value; 
      } 
      } 
     } 

     if(isValid) { 
      return null; 
     } else { 
      return { checkboxRequired: true }; 
     } 
     } 
    }

最后，已经包含在我们的模块的指令声明，我们返回到模板（需要在一种形式）：

<form #f="ngForm"> 
     <div ngModelGroup="checkboxes" #chks="ngModelGroup" hasRequiredCheckboxInGroup> 
      <input type="checkbox" name="chk1" [(ngModel)]="checks['1']"/> 
      <input type="checkbox" name="chk2" [(ngModel)]="checks['2']"/> 
     </div> 
     <div> 
     {{chks.valid}} 
     </div> 
</form>

而这里的这一切可用plunker一起玩： http://plnkr.co/edit/AXWGn5XwRo60fkqGBU3V?p=preview

我们如何将参数传递给validate函数？例如，如果我想要一个自定义验证器来强制数字输入的最小/最大值？ – Learning2Code

正是我在找的！很好的例子谢谢 –

答

看起来像ModelGroup中的每个控件都应该有自己的验证器。一旦完成，你可以通过验证器数组访问每一个。所以将所需的属性添加到所需的输入

就是这样，并不是所有*复选框都是必需的。我只想检查是否至少有一个检查。如前所述，我目前在提交处理程序中执行该操作，但如果直到至少选中一个复选框，表单根本无法验证，则会更好。 – Johan

答

感谢所有帮助我！我接受了Silentsod的回答，因为它是最有帮助的。

我最终的解决方案只是使用FormBuilder来构建表单。

在我的组件，创建表单并添加验证功能吧：

ngOnInit(): void { 
    // Validator function: 
    let validateMemberList = (group: FormGroup) => { 
     let checked = Object.keys(group.controls).reduce((count, key: string) => { 
      return count + (group.controls[key].value ? 1 : 0); 
     }, 0); 

     return checked === 0 ? {'minchecked': 1} : null; 
    }; 

    this.jobForm = this.formBuilder.group({ 
     jobTitle: ['', Validators.required], 
     // more inputs... 
     members: this.formBuilder.group({}, { 
      // The 2nd argument is an object with a validator property: 
      validator: validateMemberList 
     }), 
     supportMembers: this.formBuilder.group({}, { 
      validator: validateMemberList 
     }) 
    });

然后在我的模板：

<form [formGroup]="jobForm"> 
    <ul formGroupName="members"> 
     <li *ngFor="let user of teamMembers.members"> 
      <label class="e-label"> 
       <input class="e-input" type="checkbox" [formControlName]="user.$key"> 
       <user-badge [user]="user"></user-badge> 
      </label> 
     </li> 
    </ul> 
...

这验证表单让我显示错误并禁用提交按钮。

谢谢大家的帮助！

Angular 2：将验证器添加到ngModelGroup

相关推荐