角2/离子:形式验证

Question

我试图验证我的表单，我没有验证错误，但我的表单没有被提交。我使用过FormGroup控件。我相信这是一个非常琐碎的问题，但有些人怎么也搞不懂我哪里出了问题。

这是我的HTML

<form class="spacingafterlogo" *ngIf="userGender" [formGroup]="formPersonal" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label>Full Name:</ion-label>
    <ion-input [formControl]="username" placeholder=""></ion-input>    
  </ion-item>
  <ion-item class="label-row"  *ngIf="formPersonal.get('username').dirty && formPersonal.get('username').invalid"  >
    <span class="error-label">Please enter a valid full name</span>
  </ion-item>
  <ion-item>
    <ion-label>Birth Date:</ion-label> 
    <ion-datetime class="dob" [formControl]="dob" placeholder="{{userDob}}" displayFormat="DD/MMM/YYYY" pickerFormat="MMM DDD YYYY" max="2000" ></ion-datetime>
  </ion-item>
  <ion-item>
    <ion-label>Gender:</ion-label>
      <ion-select class="gender-select" [formControl]="gender">
        <ion-option value="Female">Female</ion-option>
        <ion-option value="Male">Male</ion-option>
      </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>Email Id:</ion-label>
    <ion-input  [formControl]="email"   type="email" placeholder=""></ion-input>
  </ion-item>
  <ion-item class="label-row"  *ngIf="formPersonal.get('email').dirty && formPersonal.get('email').invalid"  >
    <span class="error-label">Please enter a valid email</span>
  </ion-item>
  <ion-item>
    <ion-label>Mobile:</ion-label>
    <ion-input  maxlength="10" [formControl]="phone"  pattern="[0-9]*" type="tel" placeholder="Let's get in touch"></ion-input>
  </ion-item>
  <ion-item class="label-row"  *ngIf="formPersonal.get('phone').dirty && formPersonal.get('phone').invalid"  >
    <span class="error-label">Please enter a valid phone number</span>
  </ion-item>
  <ion-item>
    <ion-label>Address:</ion-label>
    <ion-textarea  [formControl]="address"  placeholder="Tell us where you live"></ion-textarea>
  </ion-item>
  <ion-item class="label-row"  *ngIf="formPersonal.get('address').dirty && formPersonal.get('address').invalid"  >
    <span class="error-label">Please enter a valid address. Only # , . - and numbers accepted</span>
  </ion-item>
  <ion-item>
    <ion-label>Pincode:</ion-label>
    <ion-input [formControl]="pincode"  maxlength="6" pattern="[0-9]*" type="tel" placeholder=""></ion-input>
  </ion-item>
  <ion-item class="label-row"  *ngIf="formPersonal.get('pincode').dirty && formPersonal.get('pincode').invalid"  >
    <span class="error-label">Please enter a valid 6 digit pincode</span>
  </ion-item>
  <ion-item>
    <ion-label>City/Town:</ion-label>
    <ion-input  [formControl]="city"  placeholder=""></ion-input>
  </ion-item>
  <ion-item class="label-row"  *ngIf="formPersonal.get('city').dirty && formPersonal.get('city').invalid"  >
    <span class="error-label">Please enter a valid city/town</span>
  </ion-item>
  <ion-item>
    <ion-label>State:</ion-label>
    <ion-select class="state-select" [formControl]="state" [selectOptions]="selectOptions"  ([ngModel])="userState" >
      <ion-option *ngFor="let state of statesList" value={{state}} >{{state}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-row>
    <ion-col col-2>
      <button type="submit" ion-button round color="secondary">Update</button> 
    </ion-col>
  </ion-row> 
  </form>

这是我的TS文件

import { Component  } from '@angular/core';
import { NavController, NavParams ,Platform,AlertController,ToastController, LoadingController} from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
import { CustomValidtorsProvider } from '../../providers/custom-validators/custom-validators';
import { ProfileProvider } from '../../providers/profile/profile';
import { StatelistProvider } from '../../providers/statelist/statelist';
@Component({
  selector: 'personal-details',
  templateUrl: 'personal-details.html',
})
export class PersonalDetailsPage {
  statesList : any;
  formPersonal : FormGroup;
  username : AbstractControl;
  phone : AbstractControl;
  dob : AbstractControl;
  pincode : AbstractControl;
  address : AbstractControl;
  state : AbstractControl;
  city: AbstractControl;
  gender : AbstractControl;
  email : AbstractControl;
  myDate : AbstractControl;  
  userEmail : string;
  userPhone : number;
  userDob : string;
  userAddress : string;
  userPincode : number;
  userGender : string;
  userState : string;
  userCity : string;
  userImg : any;
  userName : string;
  userId : string;
  headers: any; 
  params : any;
  selectOptions:any;
  loader : any;
  timer : any;
  dateFormat : string;
  userPinCode : any;
  constructor(public navCtrl: NavController, public ProfileDetails :ProfileProvider, public navParams: NavParams, private nativeStorage : NativeStorage, private fb : FormBuilder,
  private platform : Platform, public alertCtrl: AlertController,private toastCtrl : ToastController, private loadingScreen : LoadingController) 
  {
    platform.ready().then(()=>
    {

        }

    })


  }
GetDetails()
{

}

InitForm()
{
  this.formPersonal = this.fb.group({
  'username':[this.userName, Validators.compose([Validators.required,CustomValidtorsProvider.TextOnlyValidator])],
  'password':['',Validators.compose([Validators.required])], 
  'phone':[ this.userPhone, Validators.compose([Validators.required])],
  //'dob':['', Validators.compose([Validators.required])],
  'pincode':[ this.userPincode, Validators.compose([Validators.required])],
  'address':[this.userAddress, Validators.compose([Validators.required,CustomValidtorsProvider.AddressFieldValidator])],
  'state':[this.userState],
  'city':[ this.userCity, Validators.compose([Validators.required,CustomValidtorsProvider.TextOnlyValidator])],
  'gender':[this.userGender],
  'email':[this.userEmail, Validators.compose([Validators.required,CustomValidtorsProvider.EmailValidator])],
  'dob':['',""],
  }); 
  this.username = this.formPersonal.controls['username'];
  this.phone = this.formPersonal.controls['phone'];
  //this.dob = this.formPersonal.controls['dob'];
  this.pincode = this.formPersonal.controls['pincode'];
  this.address = this.formPersonal.controls['address'];
  this.state = this.formPersonal.controls['state'];
  this.city = this.formPersonal.controls['city'];
  this.gender = this.formPersonal.controls['gender'];
  this.email = this.formPersonal.controls['email'];
  this.dob = this.formPersonal.controls['dob'];        
  this.formPersonal.controls.gender.setValue(this.userGender);
  this.formPersonal.controls.state.setValue(this.userState);
}


}

Loader(){


}

UpdateNativeStorage(){

}

 DateFormat(date:string){

 }
 showAlert(){

  }

  ionViewDidLoad() {


  }
  onSubmit(value: string) : void{    
    console.log(2);
    if(this.formPersonal.valid){     
      this.showAlert()
    }
  }

}

我已经删除了所有其他无关的代码，单击按钮很好，我可以看到console.log()打印出来，但是我的this.showAlert()方法没有启动。当我的所有字段都没有任何错误时，我不明白为什么表单是无效的。这是一张没有错误的快照。

​

​

如果我收到任何验证错误，则字段将被高亮显示为红色。让我知道我错过了什么。

Answer 1

我遇到了问题，在我的InitForm()方法中，我指定了'password':['',Validators.compose([Validators.required])]，这在HTML中是不存在的。因此，表单变得无效，我的方法也不起作用。我从我的ts文件中删除了密码文件的验证，它运行得很好！

Answer 2

在InitForm() 'password' ['',Validators.compose([Validators.required])]函数中定义了，但是在 .html 中没有密码输入字段，因此表单中的是有效的

无效的输入文本高亮显示颜色可以通过共享变量$text-input-md-highlight-color-invalid在variable.scss中重写来改变

$text-input-md-highlight-color-invalid:red;