离子使警报需要输入字段

Question

当客户可以注册时，我尝试注册页面。我需要将所有输入字段设为必填，如果其中一个输入字段未填写，则会显示警报。这正是我想要的：

image

还有我的 HTML：

<ion-content padding>
  <ion-grid>
    <ion-row justify-content-center>
      <h4 style="font-size:20px; color:#272C32;">Registrati</h4>
    </ion-row>
    <div class="account-request-block">
      <h2 style="text-align:center;">Compila il form sottostante per richiedere <p style="margin-top: -20px;"> l'accesso </p> </h2>
    </div>
    <ion-row style="margin-top: -120px;">
      <ion-col>
        <ion-list inset class="registerForm">
          <ion-item>
            <ion-input  type="text" placeholder="Nome" name="nome" [(ngModel)]="user_name" required></ion-input>
          </ion-item>
          <ion-item>
            <ion-input type="text" placeholder="Cognome" name="cognome" [(ngModel)]="user_surname" required></ion-input>
          </ion-item>
          <ion-item>
            <ion-input type="email" placeholder="Email" name="email" [(ngModel)]="user_email" required></ion-input>
          </ion-item>
          <ion-item>
            <ion-input type="tel" placeholder="Telefono" name="telefono" [(ngModel)]="user_phone" required></ion-input>
          </ion-item>
          <ion-item>
            <ion-label color="dark" style="font-size:10px">
              Autorizzo il trattamento dei miei dati <br> personali
              ai sensi del Dlgs 196 del 30 <br> giugno 2003.
            </ion-label>
            <ion-toggle [(ngModel)]="user_privacy" disabled="false" checked="false"></ion-toggle>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="signup-col">
        <div class="account-request entry">
          <button ion-button block (click)="signup()">Invia</button>
        </div>
        <div class="seeProposals">
          <p>oppure <span><button class="seeProposalsRegister" (click)="openProposalsPage()">sfoglia le proposte</button></span></p>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

你可以在这里找到教程https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic

与您的注册表单类似，您可能有数十个字段。反应式表单可以帮助设置您需要的验证required, minLength, maxLength, email etc。一个带有登录表单的简单示例

在app.module.ts 中导入ReactiveFormsModule

    import { ReactiveFormsModule } from '@angular/forms';


    @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [...,ReactiveFormsModule,....],
      providers: [   
        ...
      ],
      bootstrap: [AppComponent]
    })

这是你的login.page.html

<ion-content>
  <form [formGroup]="formlogin">
       <ion-input placeholder="email" formControlName="email"></ion-input>
       <ion-input placeholder="password" formControlName="password" type="password"> 
 </ion-input>
  </form>

  <ion-button (click)="doLogin()">Login</ion-button>
</ion-content>

这是你的login.page.ts

     import { Component, OnInit } from '@angular/core';
     import {Login} from './login';
     import { FormGroup, FormBuilder,FormControl, Validators } from '@angular/forms';

     @Component({
       selector: 'app-login',
       templateUrl: './login.page.html',
       styleUrls: ['./login.page.scss'],
     })

    export class LoginPage implements OnInit {
        formlogin : FormGroup;

        constructor(formBuilder : FormBuilder) { 

            this.formlogin = this.formBuilder.group({
                    password : new FormControl('', Validators.compose([
                        Validators.required
                    ])),        
                    email : new FormControl('', Validators.compose([
                         Validators.required
                    ]))
            });
        }

      ngOnInit() { }

      doLogin(){
        let me = this;    
        if(me.formlogin.valid){
          alert('form is valid');
        } else {
          alert('empty fields');
        }    
      } 
    }

Answer 2

  signup() {
  if (this.user_name == "" || this.user_surname == "" || this.user_email == ""|| this.user_phone == "") {
  const alert = this.alertCtrl.create({
    title: "Warning",
    subTitle: "please fill in all fields",
    buttons: ["OK"]
  });
  alert.present();
  } 
  else {
  //if all fields are full
  }