私はこれに反応性がありますAngularフォーム構造:
myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;
ngOnInit(): void {
this.createFormControls();
this.createForm();
}
createFormControls() {
this.FIRST_NAME = new FormControl('', [Validators.required]);
this.LAST_NAME = new FormControl('', [Validators.required]);
}
createForm(): void {
this.myForm = this.fb.group({
Personal: this.fb.group({
FIRST_NAME: this.FIRST_NAME,
LAST_NAME: this.LAST_NAME,
})
})
}
私が行った場合:
this.FIRST_NAME.disable();
formControlを無効にします。
Personal
FormGroupのすべてのFormControlを無効にする方法
グループを無効にする場合は、this.Personal
は、これでFormGroupとして宣言しただけです。
だからあなたはそれを行うことができます後にフォームを構築します:
this.Personal = this.myForm.get('Personal')
それからあなたはそれを単に無効にすることができます:
this.Personal.disable();
そのような制御を無効にすることができます。だからあなたのフォームビルダーは
createForm(): void
{
this.myForm = this.fb.group({
Personal:this.fb.group({
FIRST_NAME:{value:this.FIRST_NAME,, disabled: true},
LAST_NAME:this.LAST_NAME,
})
})
}
その後、無効/有効にする場合。次の方法を使用
this.myForm.get('Personal.FIRST_NAME').disable();
this.myForm.get('Personal.FIRST_NAME').enable();
簡単な解決策:
<fieldset [disabled]="!frmCheckout.get('id').value">
... All controls inside will apply disabled rules ...
</fieldset>
フォーム全体を無効にすることもできますthis.Personal.disable();
または、すべてのフォームコントロールを列挙して、それらを1つずつ無効/有効にすることができます
for (var control in this.Personal.controls) {
this.Personal.controls[control].disable();
}
次のフォームがあるとします:
this.myForm = this.fb.group({
personal: this.fb.group({
firstName: null,
lastName: null
})
});
A)プログラムでpersonal
フォームグループを有効/無効にする場合は、すでに受け入れられている回答のように、group.disable()
/group.enable()
を使用できます。ただし、オプション引数の重要性については触れておきます。
this.myForm.get('personal').disable({ emitEvent: false });
this.myForm.get('personal').enable({ emitEvent: false });
もちろん、オプション引数{ emitEvent: false }
はオプションです。フォームからイベントを発行したい場合もあれば、発行しない場合もあります。myForm.valueChanges.subscribe()
で無効化/有効化を切り替える場合に必要です。時々、他のコントロールの値/状態に基づいて異なるコントロール/グループを有効化/無効化する必要があるためです非常に同じ形。 { emitEvent: false }
がないと、無限ループが発生します。
B)初期化時に無効にする場合は、無効にするすべてのコントロールを初期化する必要があります。次のフォームグループは最初から無効になっています。
this.myForm = this.fb.group({
personal: this.fb.group({
firstName: [ { value: null, disabled: true }, Validators.required ],
lastName: [ { value: null, disabled: true }, Validators.required ],
email: [ { value: null, disabled: true }, [ Validators.required, Validators.email ] ],
birthDate: { value: null, disabled: true }
})
});
console.log(this.myForm.get('personal').disabled); // This will output "true"
誰かが疑問に思っている場合に備えて、例としてバリデーターも追加しました。コントロールが無効になっているときにバリデーターを気にする必要がないため、バリデーションは無視されます。