Javascript Angular 2 FormBuilder禁用上的字段复选框选择
我已经构建了angular cli项目,并且有一个带有复选框的表单。选中复选框时,某些字段必须禁用 表格如下 需要在复选框选择事件上禁用/启用密码、新密码和重新键入密码字段 Html 表单已构建在构造函数内部。Javascript Angular 2 FormBuilder禁用上的字段复选框选择,javascript,angular,angular2-forms,Javascript,Angular,Angular2 Forms,我已经构建了angular cli项目,并且有一个带有复选框的表单。选中复选框时,某些字段必须禁用 表格如下 需要在复选框选择事件上禁用/启用密码、新密码和重新键入密码字段 Html 表单已构建在构造函数内部。 如何在复选框选择时禁用/启用上述字段 您需要在单击复选框时编写回调,如(单击)=“checkBoxClicked()”,并在组件中定义回调函数,如下所示 checkBoxClicked() { if(!this.userProfileForm.controls.isResetPass
如何在复选框选择时禁用/启用上述字段 您需要在单击复选框时编写回调,如
(单击)=“checkBoxClicked()”
,并在组件中定义回调函数,如下所示
checkBoxClicked() {
if(!this.userProfileForm.controls.isResetPassword.value) {
this.userProfileForm.controls.password.disable();
this.userProfileForm.controls.newPassword.disable();
this.userProfileForm.controls.reTypePassword.disable();
}else {
this.userProfileForm.controls.password.enable();
this.userProfileForm.controls.newPassword.enable();
this.userProfileForm.controls.reTypePassword.enable();
}
}
不要对模板中的控件使用
[formControl]
,而是使用formControlName
您的表单将如下所示:
<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">
<div class="row">
<div class="col">
<div class="form-group">
<label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="userName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="displayName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
<input class="form-control" type="text" formControlName="email">
</div>
</div>
<div class="col">
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" value="isResetPassword" name="isResetPassword" formControlName="isResetPassword">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="password" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="newPassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="reTypePassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
</div>
</div>
</form>
this.userProfileForm = formBuilder.group({
'userName': [null, [Validators.required]],
'displayName': [null],
'email': [null, [Validators.required]],
'isResetPassword': [false],
'password': [null],
'newPassword': [null],
'reTypePassword': [null]
})
this.userProfileForm = this.formBuilder.group({
// ...
password: [{
value: null,
disabled: !this.isResetPassword
}],
newPassword: [{
value: null,
disabled: !this.isResetPassword
}],
reTypePassword: [{
value: null,
disabled: !this.isResetPassword
}]
});
[formControl]="userProfileForm.controls['isResetPassword']"
this.userProfileForm.getRawValue();
最简单的方法是仅为密码创建一个表单组:
this.userProfileForm = formBuilder.group({
'userName': [null, [Validators.required]],
'displayName': [null],
'email': [null, [Validators.required]],
password: formBuilder.group({
'isResetPassword': this.isResetPassword,
'password': [null],
'newPassword': [null],
'reTypePassword': [null]
})
})
然后在模板上将密码更改为:
<div class="col" formGroupName="password>
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" formControlName="isResetPassword">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="password" >
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="newPassword">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="reTypePassword">
</div>
</div>
首先,我认为您希望在选中
isResetPassword
复选框时启用字段,对吗?如果是这样的话,我们现在开始:
1-模板的构造应如下所示:
<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">
<div class="row">
<div class="col">
<div class="form-group">
<label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="userName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="displayName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
<input class="form-control" type="text" formControlName="email">
</div>
</div>
<div class="col">
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" value="isResetPassword" name="isResetPassword" formControlName="isResetPassword">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="password" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="newPassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="reTypePassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
</div>
</div>
</form>
this.userProfileForm = formBuilder.group({
'userName': [null, [Validators.required]],
'displayName': [null],
'email': [null, [Validators.required]],
'isResetPassword': [false],
'password': [null],
'newPassword': [null],
'reTypePassword': [null]
})
this.userProfileForm = this.formBuilder.group({
// ...
password: [{
value: null,
disabled: !this.isResetPassword
}],
newPassword: [{
value: null,
disabled: !this.isResetPassword
}],
reTypePassword: [{
value: null,
disabled: !this.isResetPassword
}]
});
[formControl]="userProfileForm.controls['isResetPassword']"
this.userProfileForm.getRawValue();
请注意,这里我仅在this.isResetPassword
为false时禁用输入
2-要检测
上的更改,您可以使用模板中的(更改)
:
<label>
<input
type="checkbox"
[formControl]="userProfileForm.controls['isResetPassword']"
(change)="handleChange($event)">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
当然,这里有函数
来操作字段的状态
handleChange(value: boolean): void {
const passwordCtrl = this.userProfileForm.get('password');
const newPasswordCtrl = this.userProfileForm.get('newPassword');
const reTypePasswordCtrl = this.userProfileForm.get('reTypePassword');
if (value) {
passwordCtrl.enable();
newPasswordCtrl.enable();
reTypePasswordCtrl.enable();
} else {
passwordCtrl.disable();
newPasswordCtrl.disable();
reTypePasswordCtrl.disable();
}
}
一些提示: 1-尽管这只是一个偏好问题,但值得一提的是,您不需要像这样使用
[formControl]
:
<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">
<div class="row">
<div class="col">
<div class="form-group">
<label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="userName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="displayName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
<input class="form-control" type="text" formControlName="email">
</div>
</div>
<div class="col">
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" value="isResetPassword" name="isResetPassword" formControlName="isResetPassword">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="password" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="newPassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="reTypePassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
</div>
</div>
</form>
this.userProfileForm = formBuilder.group({
'userName': [null, [Validators.required]],
'displayName': [null],
'email': [null, [Validators.required]],
'isResetPassword': [false],
'password': [null],
'newPassword': [null],
'reTypePassword': [null]
})
this.userProfileForm = this.formBuilder.group({
// ...
password: [{
value: null,
disabled: !this.isResetPassword
}],
newPassword: [{
value: null,
disabled: !this.isResetPassword
}],
reTypePassword: [{
value: null,
disabled: !this.isResetPassword
}]
});
[formControl]="userProfileForm.controls['isResetPassword']"
this.userProfileForm.getRawValue();
相反,您只需使用formControlName
:
formControlName="isResetPassword"
请注意,您可以对所有控件执行相同的操作
2-您不需要在(ngSubmit)
中传递表单值,因为您已经在表单中引用了userProfileForm
而不是:
(ngSubmit)="submitForm(userProfileForm.value)"
submitForm(value: any) { console.log(value); }
这:
3-如果要查看禁用输入的值
,而不是.value
,则应使用.getRawValue()
,如下所示:
<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">
<div class="row">
<div class="col">
<div class="form-group">
<label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="userName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
<input class="form-control" type="text" formControlName="displayName">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
<input class="form-control" type="text" formControlName="email">
</div>
</div>
<div class="col">
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" value="isResetPassword" name="isResetPassword" formControlName="isResetPassword">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="password" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="newPassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" formControlName="reTypePassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
</div>
</div>
</div>
</form>
this.userProfileForm = formBuilder.group({
'userName': [null, [Validators.required]],
'displayName': [null],
'email': [null, [Validators.required]],
'isResetPassword': [false],
'password': [null],
'newPassword': [null],
'reTypePassword': [null]
})
this.userProfileForm = this.formBuilder.group({
// ...
password: [{
value: null,
disabled: !this.isResetPassword
}],
newPassword: [{
value: null,
disabled: !this.isResetPassword
}],
reTypePassword: [{
value: null,
disabled: !this.isResetPassword
}]
});
[formControl]="userProfileForm.controls['isResetPassword']"
this.userProfileForm.getRawValue();
这篇文章中的大多数方法都有效,但您需要使用设置超时来完成:
setTimeout(() => {
if (this.disable) {
this.userProfileForm.controls.password.disable();
}
else {
this.userProfileForm.controls.password.enable();
}
});
看起来像一个角度错误,问题和根据上述答案使用formControlName。单击复选框上的事件调用一个eventhandler,在其中切换isResetPassword的值,然后添加以下语句<代码>userProfileForm.updateValueAndValidity()代码>