关于angular表单编辑返回必填有值无法验证问题记录

最新推荐文章于 2022-06-30 17:53:34 发布

原创最新推荐文章于 2022-06-30 17:53:34 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决ng-zorro的nz-date-picker组件在编辑表单时遇到的必填验证问题。后台返回的时间格式为ThuApr0400:00:00CST2019，不符合常规'yyyy-MM-dd'格式导致验证失败。通过将时间格式转换为'yyyy-MM-dd'格式解决了此问题。

使用的时间组件是ng-zorro的时间组件nz-date-picker

在项目中遇到一个问题,编辑表单时返回的时间有值,但是必填验证无法验证通过,这是因为后台返回的时间格式不是常规的'yyyy-MM-dd'格式
后台返回的值Thu Apr 04 00:00:00 CST 2019

<nz-date-picker *ngSwitchCase="'prePublication'" (ngModelChange)="calcDate()"
  [(ngModel)]="level1.value" formControlName="{{level1.englishName}}" #prePublication>
</nz-date-picker>

当把值改成'yyyy-MM-dd'格式就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一颗粒普斯

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

angular 表单验证器验证的同时限制输入的实现

12-11

在Angular框架中，表单验证是确保用户输入符合特定规则的关键功能。Angular提供了一系列内置的指令，使得在HTML模板中实现表单验证变得简单。在本文中，我们将深入探讨如何在Angular中实现在验证的同时限制输入，...

Angular表单验证实例详解

09-01

在Angular开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合预期的格式和规则，从而提高数据质量和用户体验。本篇文章将深入探讨Angular中的表单验证，并通过实例进行详细解析。首先，Angular提供...

参与评论您还未登录，请先登录后发表或查看评论

html表单验证元素必填,AngularJS表单验证：向用户指示必填字段

weixin_42300167的博客

06-11

436

当相应的表单控件具有必需属性时,我希望我的表单标签在标签旁边显示一个红色星号.如果需要标签的相应输入,select或textarea(标签对应的元素),我希望在页面加载期间动态地将星号附加到标签,而不是硬编码星号.我在下面创建了指令,该指令有效.但有没有更好,更本土的方式来实现我的目标？如果div.form-group中的相应表单控件具有必需属性,则此指令查找所有div.form-group容器,...

Angular Material mat-error 组件第一次输入时不校验解决方法

weixin_42788847的博客

12-07

413

问题： mat-form-field的input第一次输入时不校验失去焦点后才会校验。解决办法： <mat-form-field appearance="outline" fxFlex="100"> <mat-icon matPrefix>search</mat-icon> <input matInput [formControl]="macControl"> <

angular回填h5控件datetime-local

阿龙的博客

01-20

824

{{AdStartTime }}"> Js: $scope.AdStartTime =$filter('date')("2017-05-19T16:00:00.0000000+08:00", "yyyy-MM-ddThh:mm:ss")

表单必填_模板驱动表单Agnular高级编程（5）

weixin_30610431的博客

01-10

179

Angular表单分为模板驱动表单和响应式表单。模板驱动表单采用ngModel对模板控件和组件变量进行绑定，适用于格式固定的表单。响应式表单使用FormGroup, FormControl，FormArray,FormBuilder 等类构建出数据对象，数据源操作和表单验证在组件逻辑中进行，适合格式不固定的表单。要使用模板驱动表单，首先要在app.module.ts中引入FormsMod...

Angular4+表单提交时未检查“required”属性

weixin_33940102的博客

08-05

991

2019独角兽企业重金招聘Python工程师标准>>> ...

angular 自定义表单验证

李卓书

05-11

2438

说明前端校验基本是每个开发者必须具备的能力，除了我们自己用一些插件去做一些校验外，比如vue中就需要自己引入一些库去做。那么angular给我们内置了哪些了？其实angular内置也好，不用我们自己去捣鼓，但是用是感觉很一般吧。例子 1 一个简单的账户、密码、手机号的界面及代码 import { Component } from '@angular/core'; import { FormControl, FormGroup, FormBuilder, Validators } from '@angu

angular表单验证

yanyi24的博客

04-08

4575

表单验证通常，我们都需要对用户的表单输入做验证，以保证数据的整体质量。 Angular也有两种验证表单的形式：使用属性验证，用于模板驱动表单；使用验证器函数进行验证，用于响应式表单。验证器（Validator）函数验证器函数可以是同步函数，也可以是异步函数。同步验证器：接受控件实例，然后返回验证错误信息或 null。在实例化一个 FormControl时把它作为构造函数的第二个参数传进去；异步验证器：接受实例并返回一个 Promise或 Observable，稍后会发出一组验证错误或

详解Angular Reactive Form 表单验证

12-13

在Angular开发中，表单验证是一项关键功能，它确保用户输入的数据符合预设的规则，从而提高应用数据的准确性和安全性。本文将深入探讨Angular的Reactive Form表单验证，这是Angular提供的两种表单模式之一，它允许更...

angular 使用ngModelChange验证两个必填文本框

qq_35157437的博客

12-31

985

angular 使用 ngModelChange 验证两个必填文本框

Angular8--表单

Delicia_Lani的博客

12-30

917

官网地址：https://angular.cn/guide/forms-overview 目录一、表单简介建立表单模型在响应式表单中建立在模板驱动表单中建立表单中的数据流响应式表单中的数据流模板驱动表单中的数据流表单验证实践一、表单简介 1.Angular提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。两者都从视图中捕获用户输入事件...

angular基础知识简介4：ng-messages表单验证、watch监听、自定义指令

chenacxz的博客

05-14

780

angular校验做的比vue要好 ngMesages主要用来做表单校验通过依赖列表装进来，基于angular //1、npm install angular-messages //2、引用angular-messages.js //3、依赖angular.module("App",['messages']) //之前的校验输入的内容比较多，不是很方便 //ng-messages引...

Angular表单校验

sixabs的博客

09-13

1191

执行ng generate component /form-check命令，生成相关表单测试用的组件在·app.module.ts中引入相应的模块和组件 1. 编写form-check.component.html文件 <form [formGroup]="formGroup"> <label>姓名<span class="star-span">*</span>：</label> <input type="text" formC

element ui的组件el-date-picker 禁止选择当前日期之前的日期

呆子小木心的博客

06-30

6342

element ui的组件el-date-picker 禁止选择当前日期之前的日期

日期选择器：禁用当前日期之后的日期选择

qq_43483403的博客

12-23

1982

elementui中日期选择器，禁用当前日期之后的日期选择，以及禁用当前月份之后的月份范围选择匹配

angular的form表单验证

qq_44768111的博客

05-13

3030

angular的form表单验证注：基于日常工作的总结，只是基础用法，一般的情况下应该是够用了，本次总结是angular的响应式表单验证，不足之处欢迎指正！！！首先要在你的页面组件的ts文件中引入angular的表单模块 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 2. 在构造器里面 constructor( private fb: FormBuilder ) { } 3. 定义表

nz-date-picker组件时间范围限制

weixin_39150852的博客

09-12

4461

组件： <nz-date-picker [nzFormat]="'yyyy-MM-dd'" [nzDisabledDate]="disabledDate" style="width: 100%" name="startDate" [(ngModel)]="formInfo.startD...

picker 设置最小时间_配置ngzerro的nzdatepicker时间选择组件

weixin_29854481的博客

01-24

507

1、官方示例nz-date-picker官方示例中做到的效果无法满足业务查询的需求，比如：我需要先选中开始时间，然后再选择结束时间时无法选中相同日期的数据，并且即使选择“此刻”时，对应的时间也没有进行禁用说明：ng-zerro是有对应的实现的，但是在示例中相对简单，无法达到效果，本文仅仅做了自己的实现记录2、如何实现可以选择相同的时间，并且禁用不在选中时间范围内的时间如：开始时间2020...