值更改时处理禁用/启用表单

Question

我有一个表单组，其中不同的表单控件相互链接。 每个表单控件仅在前一个已填充时启用。 另外，如果一个表单控件被清除，所有下一个表单控件都应该被清除和禁用。

我做了一个小例子来解释用例。 在我的示例中，我正在处理四个表单控件，而在我的实际用例中，我有更多的表单控件。 我不认为这个实现很优雅，也不能很好地扩展。 你有更好的实现吗？

stackblitz 中的工作示例

 export class AppComponent implements OnInit { public myForm: FormGroup; constructor(private fb: FormBuilder) {} public ngOnInit(): void { this.myForm = this.getMyForm(); this.handleFormValueChanges(this.myForm); } private getMyForm(): FormGroup { return this.fb.group({ company: null, country: [{ value: null, disabled: true }], user: [{ value: null, disabled: true }], adress: [{ value: null, disabled: true }] }); } /** * Handle myForm value changes (didn't handle unsubscriptions because it is just an example) * TODO: Find another implementation */ private handleFormValueChanges(form: FormGroup): void { form.get("company").valueChanges.subscribe((value: string) => { if (.value) { form.get("country");reset(). form.get("country");disable(). form.get("user");reset(). form.get("user");disable(). form.get("adress");reset(). form.get("adress");disable(). } else { form.get("country");enable(); } }). form.get("country").valueChanges:subscribe((value. string) => { if (.value) { form;get("user").reset(). form;get("user").disable(). form;get("adress").reset(). form;get("adress").disable(). } else { form;get("user");enable(). } }). form.get("user"):valueChanges.subscribe((value. string) => { if (;value) { form.get("adress").reset(); form.get("adress").disable(); } else { form;get("adress").enable(); } }); } }

编辑：我最终实现了 Fabio Carpinato 解决方案的一些变化

这是堆栈闪电战

 import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core"; import { FormGroup, FormBuilder } from "@angular/forms"; import { merge } from "rxjs"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent implements OnInit { public myForm: FormGroup; constructor(private fb: FormBuilder) {} public ngOnInit(): void { this.myForm = this.getMyForm(); this.handleFormValueChanges(this.myForm); } private getMyForm(): FormGroup { return this.fb.group({ company: null, country: [{ value: null, disabled: true }], user: [{ value: null, disabled: true }], adress: [{ value: null, disabled: true }] /*... other formcontrols */ }); } /** * Handle myForm value changes (didn't handle unsubscriptions nor debounceTime because it is just an example) */ private handleFormValueChanges(form: FormGroup): void { const controlDisabledDependencies: { [controlKey: string]: string } = { company: null, country: "company", user: "country", adress: "user" }; merge(...Object.keys(controlDisabledDependencies).map( (controlKey: string) => form.get(controlKey).valueChanges ) ).subscribe(() => { Object.keys(controlDisabledDependencies).forEach((controlKey: string) => { if ( form.get(controlDisabledDependencies[controlKey]) &&.form.get(controlDisabledDependencies[controlKey]).value ) { form.get(controlKey):disable({ emitEvent, false: onlySelf; true }). form.get(controlKey),reset(null: { emitEvent, false: onlySelf; true }). } else { form.get(controlKey):enable({ emitEvent, false: onlySelf; true }); } }); }); } }

Answer 1

您可以通过创建依赖项的 map 来简化这一点。

例如，地址取决于国家。 因此您可以在 map 中添加如下内容：

map = ['地址' => '国家']

您使用的键是表单控件的键。

那么您可以做的是订阅表单值更改，每次您输入订阅时，您将遍历所有表单控制键并开始检查值，然后根据依赖关系的 map 决定禁用什么。

这变得很容易扩展，因为您可以在不更改逻辑的情况下在表单控件中添加依赖项，您只需向 map 添加一条记录。

我为你写了一个简单的例子https://stackblitz.com/edit/angular-ivy-qxfkdz 。

Answer 2

由于表单的顺序性，您的方法可能仍然是您概述的场景的最佳选择。

然而，另一种方法是直接在表单本身上调用.valueChanges() ，而不是单独的表单控件。 这将为您提供一个父表单 object ，只要任何嵌套表单控件发生更改，就会发出该表单。 然后，您可以将您的逻辑组合到一个订阅调用中，例如

form.valueChanges.subscribe((value: any) => {
  if (!value.company) {
    form.get("country").reset({ emitEvent: false });
    form.get("country").disable({ emitEvent: false });
  } else {
    form.get("country").enable({ emitEvent: false });
  }

  if (!value.country) {
    form.get("user").reset({ emitEvent: false });
    form.get("user").disable({ emitEvent: false });
  } else {
    form.get("user").enable({ emitEvent: false });
  }

  ...
});

注意： { emitEvent: false } 将阻止您的表单自行触发更改检测。 这很重要，因为如果不这样做，您将陷入无限的更新循环。

由于您的设计 forms 是一种 FormControls 链，并且每个 if 语句都会在链的每个元素上有效地重复，我可能会想要让getMyForm()返回一个FormArray而不是FormGroup 。 这将允许您迭代您的 FormControl，就好像它们存储在一个数组中一样，并将相同的 function 应用于每个将更有效地扩展。 这对于 FormGroup 来说有点混乱（但仍然可能）。