正文 

当前位置： 首页 > 知识 >

如何通过模板驱动形式验证 Angular 7 中的下拉列表

     2023-03-13     141

关键词：

【中文标题】如何通过模板驱动形式验证 Angular 7 中的下拉列表【英文标题】：How to validate dropdown in angular 7 by template driven form 【发布时间】：2020-11-11 22:14:11 【问题描述】：

尝试验证下拉选择框但不工作。可能是css问题？那么如何验证它。如果有人知道，请帮助找到解决方案。

演示：https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.component.html

app.component.html：

<div class="form-group col">
    <select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state" [ngClass]="'invalid-textbox' :signUpForm.submitted && !state.valid ">
      <option>Select</option>
      <option *ngFor="let optionName of formFields" value="optionName">optionName</option>
     </select> 
</div>

app.component.css：

input[type=text].invalid-textbox,
select.invalid-textbox,
input[type=password].invalid-textbox 
    border-bottom: 2px solid #ed5558;

【问题讨论】：

【参考方案1】：

我在 stackblitz 中得到了这个工作。模板驱动的表单使用基本的 html 验证，因此您必须添加所需的属性。我还在[ngClass] 中将!state.valid 更改为state.invalid。我做的最后一件事是为 value 属性和 selected 属性添加一个空字符串来初始化 ngModel 状态。

HTML 模板

<div class="form-group col">
    <select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state"
        [ngClass]="'invalid-textbox' : signUpForm.submitted && state.invalid " required>
        <option value="" selected>Select</option>
        <option *ngFor="let optionName of formFields" [value]="optionName">optionName</option>
    </select>
</div>

组件

model: any = 
    state: ''
  ;

如果用户取消选择状态选项并尝试提交它，这应该立即响应。

【讨论】：

我再次更新了原始答案。第一个答案引入了另一个问题，但已解决。这些更改应该适合您。

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

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

异步验证器不适用于 Angular 中的模板驱动表单

】异步验证器不适用于Angular中的模板驱动表单【英文标题】：AsyncValidatornotworkingwithTemplatedrivenFormsinAngular【发布时间】：2017-10-1801:31:52【问题描述】：我为我的模板驱动表单创建了一个异步验证器。importDirective,forwardReffrom"@angular... 查看详情

Angular2 模板驱动的异步验证器

】Angular2模板驱动的异步验证器【英文标题】：Angular2templatedrivenasyncvalidator【发布时间】：2016-07-1402:59:42【问题描述】：我在以模板驱动形式定义异步验证器时遇到问题。目前我有这个输入：<inputtype="text"ngControl="email"[(ngModel)]=... 查看详情

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

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

如何验证 angular2 中的 FormArray 长度

】如何验证angular2中的FormArray长度【英文标题】：HowtoValidateFormArraylengthinangular2【发布时间】：2017-06-3007:14:48【问题描述】：我有一个angular2中的数据驱动形式，如下所示this.formBuilder.group(\'name\':[\'\',Validators.required],\'description\':[\'... 查看详情

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

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

如何根据 Angular 2 中的自定义验证规则显示错误消息？

】如何根据Angular2中的自定义验证规则显示错误消息？【英文标题】：HowtodisplayerrormessagebasedoncustomvalidationrulesinAngular2?【发布时间】：2016-11-2817:59:35【问题描述】：我正在使用模板驱动的方法在Angular2中构建表单，并且我已经成... 查看详情

如何使用模板驱动形式将角度路由与角度材料步进器（https://material.angular.io/components/stepper/overview）结合起来？

】如何使用模板驱动形式将角度路由与角度材料步进器（https://material.angular.io/components/stepper/overview）结合起来？【英文标题】：Howtocombineangularroutingwithangularmaterialstepper(https://material.angular.io/components/stepper/overview)usingtemplatedrive 查看详情

Angular 2阻止输入以模板驱动的形式提交

】Angular2阻止输入以模板驱动的形式提交【英文标题】：Angular2prevententerfromsubmittingintemplate-drivenform【发布时间】：2017-03-3122:16:14【问题描述】：我有使用模板驱动蓝图的表单，所以是这样的：<form#myForm="ngForm"ngSubmit="save(myForm.va... 查看详情

模型驱动形式：验证在 Angular 2 中无法按预期工作

】模型驱动形式：验证在Angular2中无法按预期工作【英文标题】：modeldrivenform:validationnotworkingasexpectedinAngular2【发布时间】：2017-03-1704:48:28【问题描述】：我正在使用这样的模型驱动形式。就像正常的验证一样，如果用户名和密... 查看详情

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

...【发布时间】：2019-04-1612:03:09【问题描述】：我正在使用Angular6开发一个Web应用程序。我想创建一些受HTML输入组件启发的自定义组件。例如：CustomComponent.ts（打字稿）@Component(selector:\'custom-component\',templ 查看详情

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

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

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

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

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

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

Angular2中的复选框组处理和验证

】Angular2中的复选框组处理和验证【英文标题】：CheckboxGrouphandlingandValidationinAngular2【发布时间】：2017-02-0203:17:50【问题描述】：我不明白，应该如何在angular2中以模型驱动形式处理复选框组。模型有一个属性languages，我这样实例... 查看详情

Angular 2单选按钮验证

】Angular2单选按钮验证【英文标题】：Angular2radiobuttonvalidation【发布时间】：2019-08-1810:20:19【问题描述】：我正在尝试通过模板驱动验证Angular2中的单选按钮但无法正常工作。我在google中搜索过也没有人正确回答。任何天才都可以... 查看详情

Angular 2 复选框验证

】Angular2复选框验证【英文标题】：Angular2checkboxvalidation【发布时间】：2019-08-1819:09:06【问题描述】：我正在尝试通过模板驱动验证Angular2中的复选框但无法正常工作。我在google中搜索过也没有人正确回答。任何天才都可以回答这... 查看详情

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

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