如何验证旧密码,新密码和使用Ionic 2中的FormGroup确认密码

时间:2017-11-14 10:49:55

标签: angular validation ionic2

我正在尝试验证密码,旧密码,新密码和&在个人资料页面中确认密码。只应检查是否输入了旧密码。我试图通过表格组来做这件事,但收到错误。

错误:

  

./TextInput类TextInput中的错误 - 由:没有   附加到表单控件元素的FormControl实例,名称为:   ' OLD_PASSWORD'

轮廓edit.ts:

constructor(public navCtrl: NavController, public 
   myForm:FormBuilder,public http: Http, public alertCtrl: 
   AlertController,public storage: Storage, public loadingCtrl: 
   LoadingController, public authservice: Auth) {
 this.profileForm = this.myForm.group({
   fname : ["", [Validators.required]],
   lname : ["", [Validators.required]],
   username : ["",Validators.required],
   email: ['', [
      Validators.required,
      Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")
   ]],
   old_password:[''],
   password: [''],
   repeatPassword: ['']
   },{validator: this.areEqual});
}
areEqual(group: FormGroup) {
  var valid = false;
  const pwd1 = group.get('password');
  const oPwd = group.get('old_password');
  const pwd2 = group.get('repeatPassword')  ;
  let rv: {[error: string]: any} = {};
  if ((oPwd.value) && pwd1.value !== pwd2.value) {
     valid = true;
  }
  if (valid) {
    return null;
  }
  return {
     areEqual: true
  };
}

profile-edit.html中的表单:

<form [formGroup]="profileForm">
    <ion-list>
    <div class="field">
                        <ion-item>
                        <ion-label><ion-icon name="person"></ion-icon></ion-label>
                            <ion-input style="margin-left: 64px" type="text" formControlName="fname"  name="fname" placeholder="First Name" ngControl="fname"></ion-input>
                        </ion-item>
                    </div>
    <div class="field">
                        <ion-item>
                        <ion-label><ion-icon name="person"></ion-icon></ion-label>
                            <ion-input style="margin-left: 64px" type="text" formControlName="lname"  name="lname" placeholder="Last Name" ngControl="lname"></ion-input>
                        </ion-item>
                    </div>
    <div class="field">
                        <ion-item>
                        <ion-label><ion-icon name="person"></ion-icon></ion-label>
                            <ion-input style="margin-left: 64px" type="text" formControlName="username"  name="username" placeholder="Username" ngControl="username"></ion-input>
                        </ion-item>
                    </div>
    <div class="field">
                    <ion-item>
                    <ion-label><ion-icon name="lock"></ion-icon></ion-label>
                        <ion-input style="margin-left: 64px" type="password" formControlName="old_password"   name="old_password" placeholder="Old Password" ngControl="old_password" ></ion-input>
                    </ion-item>
                </div>
    <div class="field">
                    <ion-item>
                    <ion-label><ion-icon name="lock"></ion-icon></ion-label>
                        <ion-input style="margin-left: 64px" type="password" formControlName="password"  name="password" placeholder="New Password" ngControl="password"></ion-input>
                    </ion-item>
                </div>
    <div class="field">
                        <ion-item>
                        <ion-label><ion-icon name="lock"></ion-icon></ion-label>
                            <ion-input style="margin-left: 64px" type="password" formControlName="repeatPassword"  name="repeatPassword" placeholder="Confirm New Password" ngControl='repeatPassword'></ion-input>
                        </ion-item>
                    </div>
    <div class="field">
                        <ion-item>
                        <ion-label><ion-icon name="mail"></ion-icon></ion-label>
                            <ion-input style="margin-left: 64px" type="email" formControlName="email"  name="email" placeholder="Email" ngControl='email' disabled="true" ></ion-input>
                        </ion-item>
                    </div>
    <div class="field regbtn">
                        <ion-item>
                            <button [disabled]="!profileForm.valid" (click)="presentConfirm()" class='login_btn'>Update</button>
                        </ion-item>
    </div>
    </ion-list>
</form>

0 个答案:

没有答案