angular - 带有验证的自定义模板

Question

我有一堂课

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]
    })

但是我想为我的模型设置类/接口，并且里面有我的验证，这可能吗？

标签： angularangular-forms

Answer 1

我知道添加验证器的唯一方法是定义 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
  )
});