正文 

当前位置： 首页 > 问答 >

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

     2023-03-13     147

关键词：

【中文标题】如何在模板驱动的表单中为 ngModelGroup 添加自定义验证【英文标题】：How to add custom validation for ngModelGroup in Template driven forms 【发布时间】：2019-02-15 02:19:15 【问题描述】：

我正在使用模板驱动的表单方法。我想在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 级别讨论自定义验证。其他文章讨论了我无法实现的响应式表单。

任何帮助将不胜感激。

【问题讨论】：

【参考方案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

【讨论】：

感谢您的回答。我将console.log() 转换为validate 方法。 validate 正在运行 5 次以上。你能说出原因吗？ 这就是角度验证器的工作方式。 Angular 在每个控件更改时触发验证。这里我们有addFormGroup，addControl（第一个控件添加到组），setValue，addControl（第二个控件添加到组），setValue调用验证函数的处理程序【参考方案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

【讨论】：

如何在 Angular 中将此模板驱动的表单更改为反应式表单？

】如何在Angular中将此模板驱动的表单更改为反应式表单？【英文标题】：HowtochangethistemplatedrivenformtoReactiveforminAngular?【发布时间】：2022-01-2309:43:36【问题描述】：如何将此模板驱动的表单更改为响应式表单？我想将此模板驱动... 查看详情

template-drivenforms

...ate-DrivenForms(模板驱动式表单)，将涉及 ngForm、ngModel、ngModelGroup、表单提交事件、表单验证和异常信息输出等内容。Userinterface//signu 查看详情

angular11模板表单相应式表单

...一个FormControl对象，并存放到FormControl的集合中　　　　NgModelGroup　　　　　　多个 查看详情

如何在 React 中为表单标签生成唯一 ID？

】如何在React中为表单标签生成唯一ID？【英文标题】：HowtogenerateuniqueIDsforformlabelsinReact?【发布时间】：2015-06-0720:57:46【问题描述】：我有带有labels的表单元素，我希望有唯一的ID将labels链接到带有htmlFor属性的元素。像这样的：R... 查看详情

如何在 Rails 4 中为多对多关联制作带有子表单的表单？

】如何在Rails4中为多对多关联制作带有子表单的表单？【英文标题】：Howtomakeaformwithasubformformany-to-manyassociationinRails4?【发布时间】：2014-02-1822:05:06【问题描述】：基本上我想做这样的事情：仅在我的情况下，我希望User能够使用... 查看详情

我应该如何在 Django 中为表单编写测试？

】我应该如何在Django中为表单编写测试？【英文标题】：HowshouldIwritetestsforFormsinDjango?【发布时间】：2011-11-1009:07:53【问题描述】：我想在编写测试时在Django中模拟对我的视图的请求。这主要是为了测试表格。这是一个简单测试... 查看详情

如何在 Visual Studio 中为迷宫设计项目制作 C# 中的图片框？

】如何在VisualStudio中为迷宫设计项目制作C#中的图片框？【英文标题】：HowtomakepictureboxinC#clickableinvisualStudioformazedesignproject?【发布时间】：2018-05-0802:06:35【问题描述】：我正在按照本教程使用表单模板和C#在VisualStudio中制作迷宫... 查看详情

如何在 NestJS 中为采用多部分表单数据的 OpenAPI 注释端点

】如何在NestJS中为采用多部分表单数据的OpenAPI注释端点【英文标题】：HowdoIannotateanendpointinNestJSforOpenAPIthattakesMultipartFormData【发布时间】：2021-03-1222:03:26【问题描述】：我的NestJS服务器有一个接受文件和其他表单数据的端点例如... 查看详情

如何在表单输入字段中为密码分配默认值？

】如何在表单输入字段中为密码分配默认值？【英文标题】：howtoassigndefaultvalueinforminputfieldforpassword?【发布时间】：2011-10-1402:43:39【问题描述】：我正在尝试在输入字段中设计一个类似于twitter中的表单我需要为输入字段分配默... 查看详情

如何在 Rails 中为现有模型生成表单？

】如何在Rails中为现有模型生成表单？【英文标题】：HowdoyougeneratetheformforanexistingmodelinRails?【发布时间】：2011-10-0210:47:24【问题描述】：为现有模型生成单个文件(_form.html.erb)的命令是什么？在Rails3中工作。谢谢。【问题讨论】... 查看详情

如何在一个视图中为一个模型创建多个表单

】如何在一个视图中为一个模型创建多个表单【英文标题】：Howtohavemultipleformsforonemodelinoneview【发布时间】：2021-10-1115:00:51【问题描述】：我需要通过以一种形式将所有与游戏相关联的作业设置为游戏的作业。当我进入edit_assignm... 查看详情

如何在 Flutter 中为禁用的文本表单字段标签的颜色设置主题？

】如何在Flutter中为禁用的文本表单字段标签的颜色设置主题？【英文标题】：HowcanIthemethecolorthedisabledtextformfield\'slabelinFlutter?【发布时间】：2019-11-2321:05:37【问题描述】：我想在我的Flutter应用中在禁用文本字段的标签上应用一... 查看详情

如何在wordpress中为子类别应用父类别模板？

】如何在wordpress中为子类别应用父类别模板？【英文标题】：Howtoapplyparentcategorytemplateforchildcategoryinwordpress?【发布时间】：2019-10-1018:51:54【问题描述】：我尝试为指定类别构建自定义模板，我的类别是新闻，我创建了一个名称为... 查看详情

如何在 django 中为模板应用背景图像

】如何在django中为模板应用背景图像【英文标题】：Howtoapplybackgroundimageforantemplatesindjango【发布时间】：2013-04-0713:14:09【问题描述】：在我的网站中，我必须在特定的表格中插入一张图片作为背景。我这样做了，但图像看起来像... 查看详情

如何在 Laravel 7 中为单选按钮设置表单标签

】如何在Laravel7中为单选按钮设置表单标签【英文标题】：HowtosetformlabelsforradiobuttonsinLaravel7【发布时间】：2020-11-1020:02:11【问题描述】：我有一些单选按钮，我想要这样的功能：当按下标签时，单选按钮也会被选中-我认为这是... 查看详情

angular2+折腾记：初步了解表单：模板驱动及数据驱动及脱坑要点

...ctiveFormsModule}from‘@angular/forms‘;表单控件响应的几种状态模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule一般做表单校验及操作推荐用数据驱 查看详情

模板驱动表单（实验部分）

#模板驱动表单验证（template-drivenformvalidation）实现思路1.引入FormsModule2.应用NgForm和ngModel（关联class的属性）3.验证4.给出提示5.提交（Submit）#实现知识点在login.component.ts中<form#f="ngForm"class="login-form">//创建模板引用变量实现双... 查看详情

如何在 Jsonnet 中为 Grafana 仪表板模板填充变量

】如何在Jsonnet中为Grafana仪表板模板填充变量【英文标题】：HowtoPopulateVariablesforGrafanaDashboardTemplateinJsonnet【发布时间】：2021-08-3017:31:41【问题描述】：我想使用单个模板部署和管理许多类似的带有jsonnet/grafonnet的Grafana仪表板，其... 查看详情