Question

我对离子3和角度很新。使用googles的教程，我创建了一个登录，在离子中进行表单验证。即使我的表格没有提交，我仍然按照他们的完整步骤进行操作。我真的无法找到问题所在。

我的代码在这里在login.ts

中

import {FormBuilder,FormGroup,Validators,FormControl} from "@angular/forms";

export class LoginPage {
  loginForm:FormGroup;
  responseData:any;
  userData={"provider":"web","email":"","password":""};
  constructor(public nav: NavController,
              public forgotCtrl: AlertController,
              public menu: MenuController,
              public toastCtrl: ToastController
  ) {


    this.loginForm = new FormGroup({
          password: new FormControl('',[Validators.required,Validators.minLength(8)]),
          email: new FormControl('',[Validators.required,Validators.pattern(".+\@.+\..+")])
    });
  this.menu.swipeEnable(false);
  }

  login() {
    //Get email address and password and validate
    if(this.loginForm.valid ){
        console.log('do authentication');
      }else{
        console.log('Invalid credential');
      }
  }

在我的login.html

中

<form [formGroup]="loginForm"  novalidate >
    <!-- Login form -->
    <div class="list-form">
      <ion-item>
        <ion-label floating>
          <ion-icon name="mail" item-start class="text-white"></ion-icon>
          Email
        </ion-label>

        <ion-input type="email" value="" formControlName ="email"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>
          <ion-icon name="lock" item-start class="text-white"></ion-icon>
          Password
        </ion-label>
        <ion-input type="password" value="" formControlName ="password"></ion-input>
      </ion-item>
    </div>

    <p text-right ion-text color="white" tappable (click)="forgotPass()"><strong>Forgot Password?</strong></p>

    <div>
      <button type="submit" ion-button icon-start block color="dark" [disabled]="!loginForm.valid"  (click)="login()">
        <ion-icon name="log-in"></ion-icon>
        SIGN IN
      </button>

    </div>

  </form>

有谁能告诉我我做错了什么？

Answer 1

而不是

this.loginForm = new FormGroup({
  password: new FormControl('',[Validators.required,Validators.minLength(8)]),
  email: new FormControl('',[Validators.required,Validators.pattern(".+\@.+\..+")])
});

尝试：

this.loginForm = this.formBuilder.group({
   email: ['', [Validators.required, Validators.pattern(".+\@.+\..+")],
   password: ['', [Validators.required, Validators.minLength(8)]]
});

Answer 2

对于那些也在寻求解决方案的人来说，这是我的登录表单的完整代码

在login.ts

import {FormBuilder,FormGroup,Validators,FormControl,AbstractControl} from "@angular/forms";

export class LoginPage {
  loginForm:FormGroup;
  email:AbstractControl;
  password:AbstractControl;
  responseData:any;
  constructor(public nav: NavController,
              public forgotCtrl: AlertController,
              public menu: MenuController,
              public formbuilder:FormBuilder
  ) {

    this.loginForm = formbuilder.group({
      email: ['', [Validators.required, Validators.pattern(".+\@.+\..+")]],
      password : ['', [Validators.required, Validators.minLength(8)]]

    })
    this.email = this.loginForm.controls['email'];
    this.password = this.loginForm.controls['password']


    this.menu.swipeEnable(false);
  }



  //login and go to home page
  login() {

    if(this.loginForm.valid ){
      console.log(this.loginForm.value);
      //Do your validation

      }else{
        console.log('Invalid credential');
      }
  }

 }

Ionic 3 Form提交无效

2 个答案: