Question

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

我的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

  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
  }

Answer 2

您可以在这里https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic

找到教程

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

将ReactiveFormsModule导入app.module.ts

    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 3

这个错误不能来自 stmt "this.formlogin = this.formBuilder.group({" .

有什么想法吗？

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'group' of undefined
TypeError: Cannot read property 'group' of undefined
    at new UserPage (user.page.ts:19)
    at NodeInjectorFactory.UserPage_Factory [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:3549)
    at instantiateRootComponent (core.js:10120)
    at createRootComponent (core.js:12479)
    at ComponentFactory$1.create (core.js:25144)
    at ViewContainerRef.createComponent (core.js:23182)
    at IonRouterOutlet.activateWith (ionic-angular.js:2938)
    at ActivateRoutes.activateRoutes (router.js:2161)
    at router.js:2112
    at resolvePromise (zone.js:1255)
    at resolvePromise (zone.js:1209)
    at zone.js:1321
    at ZoneDelegate.invokeTask (zone.js:434)
    at Object.onInvokeTask (core.js:28661)
    at ZoneDelegate.invokeTask (zone.js:433)
    at Zone.runTask (zone.js:205)
    at drainMicroTaskQueue (zone.js:620)

带警报的离子输入字段

3 个答案: