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