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

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

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

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的时间组件是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表单验证

yanyi24的博客

04-08

4429

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

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

12-11

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

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

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

weixin_42300167的博客

06-11

421

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

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

weixin_42788847的博客

12-07

392

问题： 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

807

{{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

165

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

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

weixin_33940102的博客

08-05

978

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

Angular表单验证实例详解

09-01

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

详解Angular Reactive Form 表单验证

12-13

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

Angular8 简单表单验证的实现示例

12-28

简单表单校验傻瓜式校验直接复制Antd中demo <form nz-form [nzLayout]='inline' [formGroup]=validateForm (ngSubmit)=submitForm()> <input formControlName=userName nz-input placeholder=...

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

qq_35157437的博客

12-31

967

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

Angular8--表单

Delicia_Lani的博客

12-30

888

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

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

chenacxz的博客

05-14

763

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

Angular表单校验

sixabs的博客

09-13

1158

执行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

angular踩坑——数据发生改变，视图未更新

weixin_36430673的博客

11-21

5770

大多数情况下，页面的视图会随着数据的改变而改变，少数情况下，数据变了，而视图不更新。左侧的视图，右侧数据，数据改变时，视图未更新。。。。具体原因呢，可能是angular 脏检查没有检测到数据更新吧。。。解决方案：引入 ChangeDetectorRef,使视图强刷。 1、import { Component, OnInit, Input, ChangeDetectorRef} from '@angular/core'; 2、 3、 ...

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

呆子小木心的博客

06-30

6225

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

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

qq_43483403的博客

12-23

1938

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

and design 接口传过来指定日期能选择，其余禁止选中

weixin_42378006的博客

12-22

200

采用的是angular+and design的框架，是在做项目的时候遇到的一个难题，由此来记录一下。 angular的ant.design地址 /* 网上看到的=====日期禁用 */ const disabledDate = (current,arr) =>{ let ff = false; ff = !arr.some((son,index,arr) => { return current.isSame(son,'day') }) return ff; .

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

weixin_39150852的博客

09-12

4417

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

Angular表单验证实战：内置与自定义验证解析

对于内置验证无法满足的复杂验证需求，Angular允许开发者编写自定义验证函数。自定义验证器通常是一个返回`null`或包含错误对象的函数。例如，如果需要验证邮箱的独特性，可以创建一个`uniqueEmailValidator`函数： ...