Angular7 nz-rozzo nz-form

home.component.html

<form nz-form [formGroup]="fg"><nz-form-item><nz-form-label nzRequired nzFor="name">名称</nz-form-label><nz-form-control nzHasFeedback><input nz-input formControlName="name" [(ngModel)]="query.nameVal" (ngModelChange)="updataName()" /><nz-form-explain *ngIf="fg.get('name')?.dirty&&fg.get('name')?.error"><ng-container *ngIf="fg.get('name')?.error?.required">名称不能为空   </ng-container><ng-container *ngIf="fg.get('name')?.error?.pattern">不能包含中文和空格  </ng-container><ng-container *ngIf="fg.get('name')?.error?.isSame">已存在 </ng-container></nz-form-explain></nz-form-control></nz-form-item>
</form>
<button nz-button nzType="primary" [disabled]="this.fg.invalid" (click)="confirm()">确认</button>

home.component.ts

import {OnInit} from '@angular/core'
import {FormBuilder,FormGroup,FormControl,Vaildators} from '@angular/forms'
import {Observable, Observer, Subject} from 'rxjs';
import {servervice} from '@common/servervice.service.ts'
export class HomeComponent implements OnInit{fg:FormGroupquery:Object={nameVal:''}protected ngUnsubscribe: Subject<void> = new Subject<void>();constructor(private fb:formGroup,private servervice:servervice){}ngOnInit():void{this.serviceMet()}serviceMet(){this.query.name='返回值'this.initFrom()}initForm(){const nameReg=[Validators.required,Validators.pattern(/^[\u4e00-\u9fa5]*$/)], [this.nameResgSecond]this.fg=this.fb.group({name:['',nameReg]})}confirm(){if(!this.fg.invalid){cnsole.log(this.query)}}//外部校验nameResgSecond=(control: FormControl)=>new Observable((observer: Observer<ValidationErrors | null>) => {if (/^[\x01-\x7f]{1,30}$/.test(control.value) && !(control.value.indexOf('@') > -1)) {this.servervice.personFifter({loginId: control.value,id: ''}).pipe(debounceTime(100), distinctUntilChanged()).subscribe((res: any) => {// 1   不存在      2  存在observer.next(res.data === 2 ? {isSame: true} : {});observer.complete();});} else {observer.next({});observer.complete();}})// 修改updataName(): void {Promise.resolve().then(() => this.fg.controls.name.updateValueAndValidity());}
}

Angular7 nz-rozzo nz-form相关推荐

english words
1.iterate v.反复说:重做:[计]迭代 ['ɪtəreɪt] ['ɪtəreɪt]1) Managing the caches Whenever you pass an object to ...
Unix编程/应用问答中文版(转）
Unix编程/应用问答中文版名称 -- Unix编程/应用问答中文版版本 -- 0.04 ( 2003-10-09 外发版 ) 维护 -- 小四 <scz@nsfocus.com> 主 ...
霍夫（圆）变换(hough Transform/hough cirlce Transform)原理和实现
一.霍夫(圆)变换的广泛使用和简要历史霍夫变换是一种特征提取方法,被广泛应用在图像处理和计算机视觉应用中.霍夫变换是用来辨别找出物件中的特征,例如:线条.他的算法流程大致如下,给定一个物件.要辨别的 ...
python变量域名_Python实现从url中提取域名的几种方法
从url中找到域名,首先想到的是用正则,然后寻找相应的类库.用正则解析有很多不完备的地方,url中有域名,域名后缀一直在不断增加等.通过google查到几种方法,一种是用Python中自带的模块和正则 ...
B - Dungeon Master POJ - 2251
B - Dungeon Master POJ - 2251 题目: 逃离3D迷宫,n <=30 首先是dfs,算一下最坏情况共30层,每层有30*30的循环, 复杂度 3030*30 显然严重爆 ...
Pymol | Pymol绘制GridBox图
将drawgridbox.py脚本放到pymol安装目录下 # -*- coding: utf-8 -*- from pymol.cgo import * from pymol import cmd ...
快速搭建一个基于知识图谱的智能问答系统
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要15分钟 Follow小博主,每天更新前沿干货作者:张墨一知乎链接:https://zhuanlan.zhihu.com/p/582486 ...
2014 UESTC暑前集训搜索专题解题报告
A.解救小Q BFS.每次到达一个状态时看是否是在传送阵的一点上,是则传送到另一点即可. 代码: #include <iostream> #include <cstdio> # ...
K-means算法Java实现
public class KMeansCluster { private int k;//簇的个数 private int num = 100000;//迭代次数 ...
pytorch 笔记：复现论文 Stochastic Weight Completion for Road Networks using Graph Convolutional Networks
1 理论部分论文笔记:Stochastic Weight Completion for Road Networks using Graph Convolutional Networks_UQI-LI ...

Angular7 nz-rozzo nz-form

Angular7 nz-rozzo nz-form相关推荐

最新文章

热门文章