如何在 sweetalert 中验证多个输入

如何解决如何在 sweetalert 中验证多个输入

我想使用甜蜜警报以角度验证表单，但它不起作用。 我在 html 中输入了“必需”，但仍然有问题。这是我的代码：

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>

component.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({})
    }))
 }