正文 

当前位置： 首页 > 知识 >

模板驱动表单中的表单验证问题

     2023-02-23     260

关键词：

【中文标题】模板驱动表单中的表单验证问题【英文标题】：Problem with form validation in template driven form 【发布时间】：2019-04-16 12:03:09 【问题描述】：

我正在使用 Angular 6 开发一个 Web 应用程序。我想创建一些受 HTML 输入组件启发的自定义组件。例如：

CustomComponent.ts（打字稿）

  @Component(
    selector: 'custom-component',
    templateUrl: './custom-component.html',
    providers: [
       
         provide: NG_VALUE_ACCESSOR,
         multi: true,
         useExisting: forwardRef(() => InputTextComponent)
       
    ]
    )
    export class CustomComponent 

      @Input() name: string;
      @Input() isRequired: boolean;

CustomComponent.html（模板）

<input type="text"
   [attr.name]="name"
   [required] = "isRequired"
/>

我有这个问题。假设我们在这个模板中使用我的组件：

<form #myForm="ngForm" ngNativeValidate>
  <custom-component
  name="myName"
  [isRequired] = true
  ngModel
  ></custom-component>
<button type="submit" (click)="method()">Click</button>

required 属性在&lt;input type="text/&gt;（&lt;custom-component&gt; 的包装组件）中正确初始化。问题是这样的（这是一个 Angular 问题！）：在这个使用代码中：

  method() 
    console.log(this.myForm.valid);

对象myForm.valid（其中myForm 与上一个模板中的#myForm 相关联）始终返回true 值，即使在文本字段中没有输入任何内容。这种行为是错误的：如果我不在必填字段中插入任​​何内容，我希望此值为 false。

【问题讨论】：

【参考方案1】：

要将验证添加到您的自定义输入组件，您应该将以下内容添加到您的提供程序：


  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => InputTextComponent),
  multi: true

您必须在 InputTextComponent 中实现默认方法：

validate(control: AbstractControl): ValidationErrors | null 
    return null;

如果您使用您通过 NG_VALUE_ACCESSOR 实现的 writeValue() 方法正确更新了组件中名为 value 的属性，然后确保调用（您可以通过在默认输入上实现更改事件）：

this.propagateChange(this.value);

最后将您的 isRequired 输入更改为默认的 required 属性。

 @Input() required: boolean;

您的 NgModel 现在应该可以正确更新了。

编辑： 避免使用 required （但这是正确的方法）。在验证方法中放置以下代码：

validate(control: AbstractControl): ValidationErrors | null 
    return this.isRequired && this.value.length === 0 :  required: true  : null;

当 Angular 运行它自己的验证时，它会调用这个方法。当此方法返回除 null 以外的任何内容时，该对象将添加到 FormControl 和 NgModel 中的 errors 属性中。

这是一个巨大的话题，有一些很棒的文章正确地解释了这一切。但是，正如所问的，这应该可以解决它。

【讨论】：

谢谢，除了最后一步，我什么都做了。为什么我需要编辑输入名称（@Input() required: boolean;）以及这如何反映在我的自定义组件的模板中？ 好的，它工作。但是如果我想保留 isRequired 属性怎么办？ 我想避免使用调用者的“必需”属性...我更喜欢使用调用者的自定义属性“isRequired” 当使用 NgModel 和 ControlValueAccessor 时，你通知 Angular 你将把这个组件当作默认的 HTML 输入。您可以使用 isRequired，但是，您的输入元素不是组件内的输入，而是您的 InputTextComponent 本身。我将更新我的答案以包含解决方法，但是，我建议不要这样做。这就是为什么建议像使用实际输入一样使用 require。【参考方案2】：

您应该检查表单是否脏并且是否有效。所以两者都必须是真的。否则显示它没有被改变。

【讨论】：

Angular 2 模板驱动的表单组验证

】Angular2模板驱动的表单组验证【英文标题】：Angular2templatedrivenformgroupvalidation【发布时间】：2017-06-2707:57:15【问题描述】：我有一个关于angular2模板驱动表单的问题。我已经设置了其中一个表单，如果表单组中的一个输入无效，... 查看详情

Angular - 模板驱动的表单 - 控制器中的自定义验证器功能

】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情

angular2模板驱动的表单验证问题

】angular2模板驱动的表单验证问题【英文标题】：angular2templatedrivenformvalidationissue【发布时间】：2018-03-0103:32:05【问题描述】：我对angular2模板驱动的表单验证有问题，以下是我的表单的代码。<h1>page_title</h1><div*ngIf="suc... 查看详情

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

】如何在模板驱动的表单中为ngModelGroup添加自定义验证【英文标题】：HowtoaddcustomvalidationforngModelGroupinTemplatedrivenforms【发布时间】：2019-02-1502:19:15【问题描述】：我正在使用模板驱动的表单方法。我想在ngModelGroup上添加自定义验... 查看详情

Angular 2.0 中的模型驱动表单验证问题

】Angular2.0中的模型驱动表单验证问题【英文标题】：ModeldrivenformvalidationissueinAngular2.0【发布时间】：2017-09-1700:10:49【问题描述】：在Angular2.0中，我有使用FormBuilder的模型驱动表单，ngOnInit()this.user=this.fb.group(id:[\'\',[Validators.require... 查看详情

Angular2嵌套模板驱动表单

】Angular2嵌套模板驱动表单【英文标题】：Angular2nestedtemplatedrivenform【发布时间】：2017-01-0714:35:25【问题描述】：这简直是疯了，看起来没有办法让其中一个输入位于子组件中的表单。我已经阅读了所有的博客和教程以及所有内... 查看详情

模板中的自定义表单验证错误

】模板中的自定义表单验证错误【英文标题】：customformvalidationerrorsintemplate【发布时间】：2020-07-2513:40:12【问题描述】：如何在模板中传递自定义表单验证错误？forms.pydefclean_username(self):inputusername=self.cleaned_data[\'username\']iflen(inpu... 查看详情

Django：模板中的 Crispy 表单验证错误

】Django：模板中的Crispy表单验证错误【英文标题】：Django:CrispyFormsValidationErrorinTemplate【发布时间】：2021-02-1107:43:10【问题描述】：我正在使用django-crispy-forms来呈现精美的表单。对于我的一个表单，我必须进行一些自定义调整，... 查看详情

angular自定义验证器添加入模板驱动表单

创建自定义验证器的命令nggeneratedirectiveforbidden-name(自定义床啊金验证器的名称)生成的文件内容import{Directive}from'@angular/core';@Directive({selector:'[appForbiddenName]'})exportclassForbiddenNameDirective{const 查看详情

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

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

验证模板表单中的复选框列表（不是反应式表单）Angular 2

】验证模板表单中的复选框列表（不是反应式表单）Angular2【英文标题】：ValidationofCheckboxlistinTemplateform(notReactiveforms)Angular2【发布时间】：2018-01-2320:25:15【问题描述】：如何验证是否从Angular2模板表单中的复选框列表中选择了至... 查看详情

Angular 2中的模板驱动形式和反应形式有啥区别

】Angular2中的模板驱动形式和反应形式有啥区别【英文标题】：Whatarethedifferencesbetweentemplatedrivenformsandreactiveformsinangular2Angular2中的模板驱动形式和反应形式有什么区别【发布时间】：2017-12-2920:03:27【问题描述】：在Angular2中，模... 查看详情

模板驱动表单和使用服务的响应式表单之间的区别

】模板驱动表单和使用服务的响应式表单之间的区别【英文标题】：DifferencebetweenTemplateDrivenFormandReactiveFormusingaservice【发布时间】：2019-11-0713:50:50【问题描述】：我想知道什么时候应该使用模板驱动表单而不是响应式表单。我知... 查看详情

带有 ngFor 输入的 Angular 2 模板驱动表单

】带有ngFor输入的Angular2模板驱动表单【英文标题】：Angular2templatedrivenformwithngForinputs【发布时间】：2017-01-2915:48:06【问题描述】：是否可以在模板驱动的表单中使用ngFor创建输入字段，并使用#name="ngModel"之类的东西来在另一个标... 查看详情

template-drivenforms

Angular4.x中有两种表单：Template-DrivenForms-模板驱动式表单(类似于AngularJS1.x中的表单)ReactiveForms-响应式表单本文主要介绍Template-DrivenForms(模板驱动式表单)，将涉及 ngForm、ngModel、ngModelGroup、表单提交事件、表单验证和异常信息... 查看详情

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

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

表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder

...稿）应用程序。在复选框（ion-checkbox标记）中的简单模型驱动表单验证中遇到问题ONLY。我正在使用FormBuilder来构建表单模块 查看详情

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

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