Angular 如何在sweetalert中验证多个输入

我想使用sweet alert在angular中验证表单，但它不起作用。 我在html中输入了“required”，但仍然有一个问题。这是我的密码：

component.html

<form>
   
   <input type="text"     placeholder="ENTRER VOTRE USERNAME"  id="userName"   class="swal2-input" required>
   
   <input type="password" placeholder="ENTRER VOTRE PASSWORD"  id="password"   class="swal2-input" required>
  
   <input type: "email"   placeholder="ENTRER UN EMAIL VALIDE" id="email"  type="email" 
    size="30" required class="swal2-input" pattern='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'>
   
   <input 
   +216 type: "text" size placeholder="ENTRER VOTRE NUMERO DE TELEPHONE"   id="phoneNumber" class="swal2-input" required minlength="12" maxlength="12">
   
</form>

组件。ts

  preConfirm: () => {
    this.user.username = (<HTMLInputElement>document.getElementById('userName')).value;
    this.user.email = (<HTMLInputElement>document.getElementById('email')).value;
    this.user.password = (<HTMLInputElement>document.getElementById('password')).value;
    this.user.phonenumber = (<HTMLInputElement>document.getElementById('phoneNumber')).value;

    this.registerService.register(this.user).subscribe(data => {
      if ((!this.email) || (!this.phonenumber)|| (!this.username)|| (!this.password)) {
        Swal.fire(`VERIFIER VOS CHAMPS SVP!`)
      }
      else
        Swal.fire({})
    }))
 }

预确认：（）=>{
this.user.username=（document.getElementById（'username'））.value；
this.user.email=（document.getElementById（'email'））.value；
this.user.password=（document.getElementById（'password'））.value；
this.user.phonenumber=（document.getElementById（'phonenumber'））.value；
this.registerService.register（this.user）.subscribe（数据=>{
如果（！this.email）| |（！this.phonenumber）| |（！this.username）| |（！this.password））{
Swal.fire（`VERIFIER VOS CHAMPS SVP！`）
}
其他的
游泳池火灾（{}）
}))
}
< /代码>您不使用角的表单功能，考虑使用一个或一个，这里是链接到