[angular] 양식 검증
([ngModelOptions]="{standalone: true}"
/* , FormControl FormGroup , {{ f.controls['firstField']?.value }}
。*/
Validators.ts:(양식 유효성 검사 제어)
/**
* Created by [email protected] on 3-12.
*/
import {Injectable} from "@angular/core";
import {Validators as angularValidators, AbstractControl} from '@angular/forms';
@Injectable()
export class Validators extends angularValidators {
/*E-mail*/
static email = function (control: AbstractControl) {
return Validators.validatorsByPattern('email', control, '([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?');
};
/* */
static phone = function (control: AbstractControl) {
return Validators.validatorsByPattern('phone', control, '1[0-9]{10,10}');
};
/* */
static chinese = function (control: AbstractControl) {
return Validators.validatorsByPattern('chinese', control, '[(\u4e00-\u9fa5)]+');
};
/* 、 */
static legallyNamed = function (control: AbstractControl) {
return Validators.validatorsByPattern('legallyNamed', control, '[A-Za-z0-9_]+');
};
/* */
static number = function (control: AbstractControl) {
return Validators.validatorsByPattern('number', control, '[0-9]+');
};
private static validatorsByPattern = function (name: string, control: AbstractControl, pattern: string) {
let validatorFn = Validators.pattern(pattern)(control);
if (validatorFn != null) {
validatorFn[name] = validatorFn['pattern'];
}
return validatorFn;
};
}
.ts(페이지 로직)
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder } from '@angular/forms';
import { Validators } from "../../../../providers/util/Validators";
@IonicPage()
@Component({
selector: 'page-rs-detail',
templateUrl: 'rs-detail.html',
})
export class RsDetailPage {
myForm: any;
verifyMessages = {
'cost': {
'errorMsg': '',
'required': ' ',
'number': ' '
},
'defectreason': {
'errorMsg': '',
'required': ' '
}
};
constructor(public navCtrl: NavController,
public navParams: NavParams,
private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
cost: ['', [Validators.required,Validators.number]],
defectreason: ['', [Validators.required]]
});
this.myForm.valueChanges
.subscribe(data => {
const verifyMessages = this.verifyMessages;
for (const field in verifyMessages) {
verifyMessages[field].errorMsg = '';
const control = this.myForm.get(field);
if (control && control.dirty && !control.valid) {
const messages = verifyMessages[field];
for (const key in control.errors) {
messages[key] && (verifyMessages[field].errorMsg += messages[key] + ' ');
}
}
}
});
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.