html - ionic 使输入字段需要警报

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');
        }    
      } 
    }