关键词：
【中文标题】angular2模板驱动的表单验证问题【英文标题】：angular2 template driven form validation issue 【发布时间】：2018-03-01 03:32:05 【问题描述】：我对 angular2 模板驱动的表单验证有问题，以下是我的表单的代码。
<h1>page_title</h1>
<div *ngIf="success_flag" class="alert alert-success">
success_message.message
</div>
<form #add_book_form="ngForm" (ngSubmit)="add_book(add_book_form)" novalidate>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix">
<label>Book Name</label>
<input name="book_name" id="book_name" [(ngModel)]="book_name" class="form-control" required>
<div *ngIf="book_name.invalid && (book_name.dirty || book_name.touched)" class="alert alert-danger">
<div *ngIf="book_name.errors.required">
Book Name is required.
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix">
<label>Book Description</label>
<textarea name="book_description" [(ngModel)]="book_description" class="form-control" required></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix">
<label>Book Published Date</label>
<input name="book_published_date" [(ngModel)]="book_published_date" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix">
<label>Cover Image</label>
<input name="book_cover_image" [(ngModel)]="book_cover_image" class="form-control" type="file" (change)="getFiles($event,'cover_image')" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix">
<label>PDF Copy</label>
<input name="book_pdf_copy" [(ngModel)]="book_pdf_copy" class="form-control" type="file" (change)="getFiles($event,'pdf_copy')" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix">
<label>PDF Sample</label>
<input name="book_pdf_sample" [(ngModel)]="book_pdf_sample" class="form-control" type="file" (change)="getFiles($event,'pdf_sample')" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix">
<label>Price</label>
<input name="book_price" [(ngModel)]="book_price" class="form-control" type="number" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
<div class="form-group clearfix text-center">
<button [disabled]="add_book_form.invalid" class="btn btn-success">Save Book</button>
</div>
</div>
</div>
</form>
目前提交按钮被禁用。当我尝试填写书名字段时，它必须被启用，但它仍然无法正常工作，我不知道究竟存在哪里问题。错误消息也没有显示。
请帮忙。 谢谢
【问题讨论】：
这可能不相关但是，你为什么在这里使用 novalidate？ 但你的条件是只有在整个表单有效的情况下才启用按钮。 【参考方案1】：@DBQ 是对的。
而不是使用：
<button [disabled]="add_book_form.invalid" class="btn btn-success">Save Book</button>
你应该使用：
<button [disabled]="add_book_form.controls['book_name'].invalid" class="btn btn-success">Save Book</button>
【讨论】：
Angular2嵌套模板驱动表单
】Angular2嵌套模板驱动表单【英文标题】：Angular2nestedtemplatedrivenform【发布时间】：2017-01-0714:35:25【问题描述】：这简直是疯了，看起来没有办法让其中一个输入位于子组件中的表单。我已经阅读了所有的博客和教程以及所有内... 查看详情
Angular2 模板驱动的异步验证器
】Angular2模板驱动的异步验证器【英文标题】：Angular2templatedrivenasyncvalidator【发布时间】：2016-07-1402:59:42【问题描述】：我在以模板驱动形式定义异步验证器时遇到问题。目前我有这个输入：<inputtype="text"ngControl="email"[(ngModel)]=... 查看详情
Angular 2.0 中的模型驱动表单验证问题
】Angular2.0中的模型驱动表单验证问题【英文标题】：ModeldrivenformvalidationissueinAngular2.0【发布时间】：2017-09-1700:10:49【问题描述】：在Angular2.0中，我有使用FormBuilder的模型驱动表单，ngOnInit()this.user=this.fb.group(id:[\'\',[Validators.require... 查看详情
模板驱动表单中的表单验证问题
】模板驱动表单中的表单验证问题【英文标题】：Problemwithformvalidationintemplatedrivenform【发布时间】：2019-04-1612:03:09【问题描述】：我正在使用Angular6开发一个Web应用程序。我想创建一些受HTML输入组件启发的自定义组件。例如：Cus... 查看详情
angular2+折腾记：初步了解表单：模板驱动及数据驱动及脱坑要点
前言表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。首先需要操作表单的模块引入这两个模块；import{FormsModule,ReactiveFormsModule}from‘@angular/forms‘;表单控件响应的几种状态模板驱动表单依赖FormsModule,数据... 查看详情
验证模板表单中的复选框列表（不是反应式表单）Angular 2
】验证模板表单中的复选框列表（不是反应式表单）Angular2【英文标题】：ValidationofCheckboxlistinTemplateform(notReactiveforms)Angular2【发布时间】：2018-01-2320:25:15【问题描述】：如何验证是否从Angular2模板表单中的复选框列表中选择了至... 查看详情
带有 ngFor 输入的 Angular 2 模板驱动表单
】带有ngFor输入的Angular2模板驱动表单【英文标题】：Angular2templatedrivenformwithngForinputs【发布时间】：2017-01-2915:48:06【问题描述】：是否可以在模板驱动的表单中使用ngFor创建输入字段，并使用#name="ngModel"之类的东西来在另一个标... 查看详情
异步验证器不适用于 Angular 中的模板驱动表单
】异步验证器不适用于Angular中的模板驱动表单【英文标题】：AsyncValidatornotworkingwithTemplatedrivenFormsinAngular【发布时间】：2017-10-1801:31:52【问题描述】：我为我的模板驱动表单创建了一个异步验证器。importDirective,forwardReffrom"@angular... 查看详情
如何在模板驱动的表单中为 ngModelGroup 添加自定义验证
】如何在模板驱动的表单中为ngModelGroup添加自定义验证【英文标题】：HowtoaddcustomvalidationforngModelGroupinTemplatedrivenforms【发布时间】：2019-02-1502:19:15【问题描述】：我正在使用模板驱动的表单方法。我想在ngModelGroup上添加自定义验... 查看详情
Angular 2中的模板驱动形式和反应形式有啥区别
】Angular2中的模板驱动形式和反应形式有啥区别【英文标题】：Whatarethedifferencesbetweentemplatedrivenformsandreactiveformsinangular2Angular2中的模板驱动形式和反应形式有什么区别【发布时间】：2017-12-2920:03:27【问题描述】：在Angular2中，模... 查看详情
Angular - 模板驱动的表单 - 控制器中的自定义验证器功能
】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情
表单提交后Angular 2显示验证错误
】表单提交后Angular2显示验证错误【英文标题】：Angular2displayvalidationerrorsafterformsubmit【发布时间】：2016-03-1011:26:09【问题描述】：我正在构建一个模型驱动的Angular2表单。我发现的大多数示例都会禁用提交按钮，直到表单有效。... 查看详情
angular自定义验证器添加入模板驱动表单
创建自定义验证器的命令nggeneratedirectiveforbidden-name(自定义床啊金验证器的名称)生成的文件内容import{Directive}from'@angular/core';@Directive({selector:'[appForbiddenName]'})exportclassForbiddenNameDirective{const 查看详情
angular2中的表格
】angular2中的表格【英文标题】：FormsInangular2【发布时间】：2016-03-2420:00:58【问题描述】：对如何在angular2beta中使用表单（模板或模态驱动）有点困惑。目前我正在使用模态驱动的表单，但我的form.html出现了一些错误：<form[ngFo... 查看详情
Angular 2阻止输入以模板驱动的形式提交
】Angular2阻止输入以模板驱动的形式提交【英文标题】：Angular2prevententerfromsubmittingintemplate-drivenform【发布时间】：2017-03-3122:16:14【问题描述】：我有使用模板驱动蓝图的表单，所以是这样的：<form#myForm="ngForm"ngSubmit="save(myForm.va... 查看详情
带有预填充数据的 Angular2 表单验证
】带有预填充数据的Angular2表单验证【英文标题】：Angular2Form-validationwithprefilleddata【发布时间】：2017-05-2107:02:44【问题描述】：我有一个带有两个输入字段（文本）的表单。从头开始创建（=没有信息）效果很好。如您所料，也... 查看详情
angular2表单验证器中的验证描述
】angular2表单验证器中的验证描述【英文标题】：Validationdescriptioninangular2formsvalidators【发布时间】：2016-05-0617:36:15【问题描述】：翻看我看到的angular2apiControl类minLength(minLength:number):Function我了解该功能的作用。我想知道是否无法... 查看详情
angular2表单验证本机警报[重复]
】angular2表单验证本机警报[重复]【英文标题】：angular2formvalidationnativealret[duplicate]【发布时间】：2017-10-2700:45:15【问题描述】：我使用formBuilder制作了formGroup和formControl。下面的代码是我的代码的一部分。companyPhoneFormGroup:fb.group(c... 查看详情