假設我們有一個非常基本的角度反應形式，有兩種模式：編輯和顯示。在顯示模式下，輸入欄位被禁用，在編輯模式下被啟用：
<form [formGroup]="formGroup" (ngSubmit)="submitForm()" novalidate>
<label for="fname">First name:</label><br />
<input
type="text"
id="fname"
name="fname"
formControlName="fname"
/><br />
<label for="lname">Last name:</label><br />
<input
type="text"
id="lname"
name="lname"
formControlName="lname"
/><br /><br />
<button type="submit">{{formMode == 'show' ? 'Edit' : 'Submit'}}</button>
</form>
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
formGroup: FormGroup;
formMode: 'show' | 'edit' = 'show';
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.formGroup = this.fb.group({
fname: [{ value: 'John', disabled: this.formMode == 'show' }],
lname: [{ value: 'Doe', disabled: this.formMode == 'show' }],
});
}
submitForm() {
if (this.formMode === 'edit') {
console.log(this.formGroup.value);
this.formMode = "show"
} else {
this.formMode = "edit"
}
}
但是，當狀態 od formMode 從顯示切換到編輯狀態時，formControls 的禁用狀態不會改變。
我知道我可以使用 this.formGroup.enable() 和 this.formGroup.disable()，但是如果表單很大并且只有一些欄位處于切換狀態，那將是一團糟。
我預計這個禁用的道具是反應性的，因為 this.formMode 默認是反應性的......
這是一個閃電戰： https ://stackblitz.com/edit/angular-ivy-4zybd7?file=src/app/app.component.ts
uj5u.com熱心網友回復：
我們可以創建一個自定義指令并將其應用于表單元素，然后在指令中注入 formGroup 指令以獲取所有 formControl 路徑，然后根據我們的條件您可以禁用或啟用。
formControlPath 有什么用？
FormGroup 可以有多個 formControl.To 將所有 formControl 名稱作為陣列使用this.control.directives.map((dir) => dir.path.join())
為什么使用 Promise.resolve？
如果你console.log(this.formControlPath)在 ngOnChanges 里面會是空的。要在 ngOnChanges 中獲取所有已注冊的 formControl 鍵，請使用 setTimeOut 或 Promise.resolve。
custom.directive.ts
import { Directive, Input, OnChanges, OnInit } from '@angular/core';
import { FormGroupDirective, NgControl } from '@angular/forms';
export type FormMode = 'show' | 'edit';
@Directive({
selector: '[appCanDisable]',
})
export class CanDisableDirective implements OnChanges {
@Input() formMode: FormMode;
@Input() disableFields: string[]; //Field you want to disable pass it from parent compinent
get formControlPath(): string[] {
return this.control.directives.map((dir) => dir.path.join());
}
constructor(private control: FormGroupDirective) {}
ngOnChanges() {
Promise.resolve().then(() => {
const state = this.formMode === 'show' ? 'disable' : 'enable';
this.formControlPath.forEach((path) => {
if (this.disableFields.find((field) => field === path)) {
this.control.form.get(path)[state]();
}
});
});
}
}
作業示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/483793.html
下一篇：在聯系表單中有多個警報框