資訊專(zhuān)欄INFORMATION COLUMN
摘要：根據(jù)最近的使用總結(jié)一下在中使用創(chuàng)建表單需求創(chuàng)建一個(gè)帶驗(yàn)證的表單如果表單驗(yàn)證不通過(guò)則提交按鈕自定義驗(yàn)證器需求密碼需要格式為數(shù)字字母下劃線位參考自定義密碼驗(yàn)證通過(guò)驗(yàn)證時(shí)需要返回密碼格式為數(shù)字字母下劃線位動(dòng)態(tài)創(chuàng)建表單需求表單增
Angular5 Reactive Form
根據(jù)最近的使用, 總結(jié)一下在ngx中使用reactive form
1. 創(chuàng)建表單需求: 創(chuàng)建一個(gè)帶驗(yàn)證的表單, 如果表單驗(yàn)證不通過(guò)則提交按鈕disabled=true
// app.component.ts
import {Component, OnInit} from "@angular/core";
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
name = "app";
form: FormGroup;
constructor(
private fb: FormBuilder
){}
ngOnInit(){
this.form = this.fb.group({
name: ["", Validators.required],
password: ["", [Validators.required, Validators.minLength(6)]]
});
}
submit(){
if(this.form.valid){
console.log("submiting...")
}else{
console.log("form is not valid")
}
}
reset(){
this.form.reset();
}
}
2. 自定義驗(yàn)證器
需求: 密碼需要格式為數(shù)字字母下劃線6-12位
參考: Custom validators
// app.component.ts
...
// 自定義密碼驗(yàn)證
function ValidPwd(control: AbstractControl):any {
const reg = /^w{6,12}$/;
if(reg.test(control.value)){
// 通過(guò)驗(yàn)證時(shí)需要返回 null
return null;
}
return {status: "error", message: "密碼格式為數(shù)字字母下劃線6-12位"}
}
...
export class AppComponent implements OnInit {
...
ngOnInit(){
this.form = this.fb.group({
name: ["", Validators.required],
password: ["", [Validators.required, ValidPwd]]
});
}
...
}
3. 動(dòng)態(tài)創(chuàng)建表單
需求: 表單增加朋友選項(xiàng), 默認(rèn)顯示一個(gè), 可以增加/刪除
// app.component.ts
...
export class AppComponent implements OnInit {
name = "app";
form: FormGroup;
friends;
constructor(
private fb: FormBuilder
) {}
ngOnInit() {
this.form = this.fb.group({
name: ["", Validators.required],
password: ["", [Validators.required, ValidPwd]],
friends: this.fb.array([this.createFriend()])
});
this.friends = this.form.get("friends") as FormArray;
}
/**
* 動(dòng)態(tài)創(chuàng)建表單
* @returns {FormControl}
*/
createFriend() {
return this.fb.control("", Validators.required);
}
/**
* 增加輸入框
*/
addFriend(): void {
this.friends.push(this.createFriend());
}
/**
* 移除輸入框
* @param {number} i
*/
removeFriend(i: number): void {
this.friends.removeAt(i);
}
...
}
4. standalone
需求: 增加單選框控制表單
在Reactive表單中, 使用ngModel時(shí), 會(huì)出現(xiàn)報(bào)錯(cuò)
Error:
ngModel cannot be used to register form controls with a parent formGroup directive.
報(bào)錯(cuò)中也提示了, 應(yīng)該在input中增加[ngModelOptions]="{standalone: true}"
文檔中是這么介紹的:
standalone: Defaults to false. If this is set to true, the ngModel will not register itself with its parent form, and will act as if it"s not in the form. This can be handy if you have form meta-controls, a.k.a. form elements nested in the tag that control the display of the form, but don"t contain form data.
現(xiàn)在表單變成這樣:
app.componen.ts中增加contactType變量, 表單實(shí)例中增加contact:
// app.component.ts
...
export class AppComponent implements OnInit {
name = "app";
form: FormGroup;
friends;
contactType:number = 0;
constructor(
private fb: FormBuilder
) {}
ngOnInit() {
this.form = this.fb.group({
name: ["", Validators.required],
password: ["", [Validators.required, ValidPwd]],
friends: this.fb.array([this.createFriend()]),
contact: ["", Validators.required]
});
this.friends = this.form.get("friends") as FormArray;
}
/**
* 動(dòng)態(tài)創(chuàng)建表單
* @returns {FormControl}
*/
createFriend() {
return this.fb.control("", Validators.required);
}
/**
* 增加輸入框
*/
addFriend(): void {
this.friends.push(this.createFriend());
}
/**
* 移除輸入框
* @param {number} i
*/
removeFriend(i: number): void {
this.friends.removeAt(i);
}
submit() {
if (this.form.valid) {
console.log("submitting...");
} else {
console.log("form is not valid");
}
}
reset() {
this.form.reset();
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94617.html
序 本文主要研究一下Java11的HttpClient的基本使用。 變化 從java9的jdk.incubator.httpclient模塊遷移到j(luò)ava.net.http模塊，包名由jdk.incubator.http改為java.net.http 原來(lái)的諸如HttpResponse.BodyHandler.asString()方法變更為HttpResponse.BodyHandlers.of...
摘要：概念響應(yīng)式編程，異步非阻塞就是響應(yīng)式編程，與之相對(duì)應(yīng)的是命令式編程。的另外一種實(shí)現(xiàn)方式就是消息隊(duì)列。非阻塞設(shè)計(jì)利用規(guī)范中的實(shí)現(xiàn)實(shí)現(xiàn)代碼鏈接 注： 本文是由讀者觀看小馬哥公開(kāi)課視頻過(guò)程中的筆記整理而成。更多Spring Framework文章可參看筆者個(gè)人github: spring-framework-lesson 。 0. 編程模型與并發(fā)模型 Spring 5實(shí)現(xiàn)了一部分Reacti...
摘要：具有數(shù)據(jù)收集校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴(kuò)展，組件包含有復(fù)選框單選框輸入框下拉選擇框等表單元素以及省市區(qū)三級(jí)聯(lián)動(dòng)時(shí)間選擇日期選擇顏色選擇滑塊評(píng)分框架樹(shù)型文件圖片上傳等功能組件。 form-create 具有數(shù)據(jù)收集、校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴(kuò)展，組件包含有復(fù)選框、單選框、輸入框、下拉選擇框等表單元素以及省市區(qū)三級(jí)聯(lián)動(dòng),時(shí)間選擇,日期選擇,...
摘要：目的是節(jié)省開(kāi)發(fā)人員在表單頁(yè)面上耗費(fèi)的時(shí)間，從而更專(zhuān)注于功能開(kāi)發(fā)。使用可快速便捷的生成日常開(kāi)發(fā)中所需的各種表單?？赏ㄟ^(guò)后端返回生成規(guī)則，進(jìn)行渲染。 form-create 具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定、事件擴(kuò)展以及自定義組件，可快速生成包含有省市區(qū)三級(jí)聯(lián)動(dòng)、時(shí)間選擇、日期選擇等17種功能組件。 已兼容iview2.和iview3.版本 Github...
摘要：原文鏈接編程方法論響應(yīng)式與代碼設(shè)計(jì)實(shí)戰(zhàn)序，來(lái)自于微信公眾號(hào)次靈均閣正文內(nèi)容在一月的架構(gòu)和設(shè)計(jì)趨勢(shì)報(bào)告中，響應(yīng)式編程和函數(shù)式仍舊編列在第一季度的早期采納者中。 原文鏈接：《Java編程方法論：響應(yīng)式RxJava與代碼設(shè)計(jì)實(shí)戰(zhàn)》序，來(lái)自于微信公眾號(hào)：次靈均閣 正文內(nèi)容 在《2019 一月的InfoQ 架構(gòu)和設(shè)計(jì)趨勢(shì)報(bào)告》1中，響應(yīng)式編程（Reactive Programming）和函數(shù)式...
閱讀 1389·2021-10-13 09:39
閱讀 1345·2021-09-23 11:22
閱讀 2255·2019-08-30 14:05
閱讀 1069·2019-08-29 17:03
閱讀 789·2019-08-29 16:24
閱讀 2237·2019-08-29 13:51
閱讀 667·2019-08-29 13:00
閱讀 1324·2019-08-29 11:24
