Angular 带有验证的自定义模板
我有一节课Angular 带有验证的自定义模板,angular,angular-forms,Angular,Angular Forms,我有一节课 export class Credentials { constructor() { } public username: string; public password: string; } 然后像这样在我的组件中使用它 export class RegisterComponent implements OnInit { registerModel: Credentials constructor() { this.registerM
export class Credentials {
constructor() { }
public username: string;
public password: string;
}
然后像这样在我的组件中使用它
export class RegisterComponent implements OnInit {
registerModel: Credentials
constructor() {
this.registerModel= new Credentials ()
}
ngOnInit(): void {
}
}
我想在调用api之前向模型添加自定义验证,
我知道这是可能的
registerModel: FormGroup;
constructor(private fb: FormBuilder) {
this.registerModel = this.fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
})
但是我想为我的模型设置类/接口,并在其中进行验证,这是可能的吗?我知道添加验证程序的唯一方法是定义formControl或使用setValidator。因此,您的类可以是属性形式
export class Credentials {
public form:FormGroup
public username: string;
public password: string;
constructor(data:any=null) {
data=data || {username:null,password:null}
this.username=data.username
this.password=data.password
this.form=new FormGroup({
userName:new FormControl(this.username,Validators.required),
password:new FormControl(this.password,Validators.required)
})
}
}
//and use
this.form=this.credentials.form
或者有一个属性验证器
export class Credentials {
public validators:any
public username: string;
public password: string;
constructor(data:any=null) {
data=data || {username:null,password:null}
validators={
userName:[Validators.required],
password:[Validators.required]
}
}
}
// and use as
this.form = new FormGroup({
userName: new FormControl(
this.credentials.username,this.credentials.validators.username
),
password: new FormControl(
this.credentials.password,this.credentials.validators.password
)
});