- 首页
- 前端开发
- Angular 2 FormBuilder在复选框选择上禁用字段
Angular 2 FormBuilder在复选框选择上禁用字段
[英] Angular 2 FormBuilder disable fields on checkbox select
本文介绍了Angular 2 FormBuilder在复选框选择上禁用字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经构建了 angular cli 项目并且有一个带有复选框的表单.某些字段必须在复选框选择时禁用.
表格如下:
需要在复选框选择事件中禁用/启用密码、新密码和重新输入密码字段.
HTML
<div class="form-group"><标签>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' |翻译}}</label><输入类=表单控件"类型=文本"[formControl]=userProfileForm.controls['displayName']">
<div class="form-group"><标签>{{ 'USER_PROFILE_MODEL.EMAIL' |翻译}}</label><输入类=表单控件"类型=文本"[formControl]=userProfileForm.controls['email']">
<div class="col"><div class="form-group"><label class="checkbox-inline"><输入类型=复选框"值=isResetPassword"名称=isResetPassword"[formControl]=userProfileForm.controls['isResetPassword']">{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' |翻译 }}
<div class="form-group"><标签>{{ 'USER_PROFILE_MODEL.PASSWORD' |翻译}}</label><输入类=表单控件"类型=密码"[formControl]=userProfileForm.controls['password']">
<div class="form-group"><标签>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' |翻译}}</label><输入类=表单控件"类型=密码"[formControl]=userProfileForm.controls['newPassword']">
<div class="form-group"><标签>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' |翻译}}</label><输入类=表单控件"类型=密码"[formControl]=userProfileForm.controls['reTypePassword']">
</表单>
代码
this.isResetPassword = true;this.userProfileForm = formBuilder.group({'userName': [null, [Validators.required]],'显示名称':[空]，'email': [null, [Validators.required]],'isResetPassword': this.isResetPassword,'密码': [{值:空，禁用:this.isResetPassword}],'新密码': [{值:空，禁用:this.isResetPassword}],'重新输入密码': [{值:空，禁用:this.isResetPassword}]})
Form 已经内置在构造函数中.如何在复选框选择中禁用/启用上述字段.
解决方案
首先，我相信您希望 启用 字段当且仅当 isResetPassword 复选框被选中，对吗?如果是这样，我们开始:
1 - 表单的构造应该是这样的:
this.userProfileForm = this.formBuilder.group({//...密码: [{值:空，禁用:!this.isResetPassword}],新密码: [{值:空，禁用:!this.isResetPassword}],重新输入密码: [{值:空，禁用:!this.isResetPassword}]});
请注意，这里我仅在 this.isResetPassword 为 false 时禁用输入.
2 - 要检测 <input type="checkbox"> 上的更改，您可以在 模板(change)>:
...甚至，在组件中，使用valueChanges:
this.userProfileForm.get('isResetPassword').valueChanges.subscribe(value => this.handleChange(value));
当然，这里还有用于操作字段状态的 function.
handleChange(value: boolean): void {const passwordCtrl = this.userProfileForm.get('password');const newPasswordCtrl = this.userProfileForm.get('newPassword');const reTypePasswordCtrl = this.userProfileForm.get('reTypePassword');如果(值){密码Ctrl.enable();newPasswordCtrl.enable();reTypePasswordCtrl.enable();} 别的 {密码Ctrl.disable();newPasswordCtrl.disable();reTypePasswordCtrl.disable();}}
<小时>
一些提示:
1 - 虽然这只是偏好问题，但值得一提的是，您不需要像这样使用 [formControl]:
[formControl]="userProfileForm.controls['isResetPassword']"
相反，您可以简单地使用 formControlName:
formControlName="isResetPassword"
请注意，您可以对所有控件执行相同操作.
2 - 您不需要在 (ngSubmit) 中传递 form 值，因为您已经在 userProfileForm 中引用了表单.
代替:
(ngSubmit)="submitForm(userProfileForm.value)"submitForm(value: any) { console.log(value);}
这个:
(ngSubmit)="submitForm()"submitForm() { console.log(this.userProfileForm.value);}
3 - 如果您想查看禁用输入的 value，而不是 .value，您应该使用 .getRawValue()，像这样:
this.userProfileForm.getRawValue();
<小时>
演示(使用(change))>
演示(使用 valueChanges)
I have build angular cli project and have a form with checkbox. Some of the fields must disable on checkbox select.
Form is as follows:
need to disable/enable password, new password and re type password fields on checkbox select event.
Html
<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" [formControl]="userProfileForm.controls['userName']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
<input class="form-control" type="text" [formControl]="userProfileForm.controls['displayName']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
<input class="form-control" type="text" [formControl]="userProfileForm.controls['email']">
</div>
</div>
<div class="col">
<div class="form-group ">
<label class="checkbox-inline">
<input type="checkbox" value="isResetPassword" name="isResetPassword" [formControl]="userProfileForm.controls['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" [formControl]="userProfileForm.controls['password']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
<input class="form-control" type="password" [formControl]="userProfileForm.controls['newPassword']">
</div>
<div class="form-group ">
<label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
<input class="form-control" type="password" [formControl]="userProfileForm.controls['reTypePassword']">
</div>
</div>
</div>
</form>
ts code
this.isResetPassword = true;
this.userProfileForm = formBuilder.group({
'userName': [null, [Validators.required]],
'displayName': [null],
'email': [null, [Validators.required]],
'isResetPassword': this.isResetPassword,
'password': [{
value: null,
disabled: this.isResetPassword
}],
'newPassword': [{
value: null,
disabled: this.isResetPassword
}],
'reTypePassword': [{
value: null,
disabled: this.isResetPassword
}]
})
Form has built inside the constructor.
How can I disable/enable the above fields on check box select.
解决方案
At first, I believe that you want to enable fields if and only if isResetPassword checkbox is selected, right? If so, here we go:
1 - The construction of the form should be like this:
this.userProfileForm = this.formBuilder.group({
// ...
password: [{
value: null,
disabled: !this.isResetPassword
}],
newPassword: [{
value: null,
disabled: !this.isResetPassword
}],
reTypePassword: [{
value: null,
disabled: !this.isResetPassword
}]
});
Note that here I'm disabling inputs only when this.isResetPassword is false.
2 - To detect changes on your <input type="checkbox">, you can use either (change) in template:
<label>
<input
type="checkbox"
[formControl]="userProfileForm.controls['isResetPassword']"
(change)="handleChange($event)">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
... or even, in component, using valueChanges:
this.userProfileForm.get('isResetPassword').valueChanges.subscribe(value => this.handleChange(value));
And, of course, here's the function to manipulate the state of fields.
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();
}
}
Some tips:
1 - Although it's only a matter of preference, it's worth to mention that you don't need to use [formControl] like this:
[formControl]="userProfileForm.controls['isResetPassword']"
Instead, you can simply use formControlName:
formControlName="isResetPassword"
Note that you can do the same for all your controls.
2 - You don't need to pass the form value in (ngSubmit) since you've already the reference of userProfileForm in form.
Instead of:
(ngSubmit)="submitForm(userProfileForm.value)"
submitForm(value: any) { console.log(value); }
This:
(ngSubmit)="submitForm()"
submitForm() { console.log(this.userProfileForm.value); }
3 - If you want to see the value of disabled inputs, instead of .value, you should use .getRawValue(), like this:
this.userProfileForm.getRawValue();
DEMO (using (change))
DEMO (using valueChanges)
这篇关于Angular 2 FormBuilder在复选框选择上禁用字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
