Angular cliプロジェクトをビルドし、チェックボックス付きのフォームがあります。一部のフィールドは、チェックボックスの選択時に無効にする必要があります。
パスワード、新しいパスワードを無効/有効にし、チェックボックス選択イベントでパスワードフィールドを再入力する必要があります。
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コード
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
}]
})
フォームはコンストラクター内に組み込まれています。チェックボックスの選択で上記のフィールドを無効/有効にするにはどうすればよいですか。
最初は、チェックボックスが選択されている場合にのみフィールドを有効にしたいと思いますよね?もしそうなら、ここに行きます:isResetPassword
1-フォームの構成は次のようになります。
this.userProfileForm = this.formBuilder.group({
// ...
password: [{
value: null,
disabled: !this.isResetPassword
}],
newPassword: [{
value: null,
disabled: !this.isResetPassword
}],
reTypePassword: [{
value: null,
disabled: !this.isResetPassword
}]
});
ここでは、this.isResetPassword
がfalseの場合にのみ入力を無効にしていることに注意してください。
2-の変更を検出するに<input type="checkbox">
は(change)
、テンプレートで次のいずれかを使用できます。
<label>
<input
type="checkbox"
[formControl]="userProfileForm.controls['isResetPassword']"
(change)="handleChange($event)">
{{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>
...または、コンポーネントで、を使用して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');
if (value) {
passwordCtrl.enable();
newPasswordCtrl.enable();
reTypePasswordCtrl.enable();
} else {
passwordCtrl.disable();
newPasswordCtrl.disable();
reTypePasswordCtrl.disable();
}
}
いくつかのヒント:
1-これは好みの問題ですが、次の[formControl]
ように使用する必要はないことに注意してください。
[formControl]="userProfileForm.controls['isResetPassword']"
代わりに、単に使用することができますformControlName
:
formControlName="isResetPassword"
すべてのコントロールに対して同じことができることに注意してください。
2 -あなたが渡す必要はありません、フォームの値をに(ngSubmit)
あなたはすでにの参照たのでuserProfileForm
中をform
。
の代わりに:
(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();
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加