angular - 如果控件具有值，则标记角度形式组

问题描述

Angular 表单组具有“ng-valid”、“ng-touched”等...但是有没有办法检查组中的控件是否具有价值？

原因是，如果子控件具有值，我想在组上设置复选标记，如果它们没有值，则将其删除

我的表格是动态表格

<div *ngIf="loaded">
  <form (ngSubmit)="onSubmit()" [formGroup]="form">
    <ng-container *ngFor="let group of objectKeys(globalForm); let index = index">
      <app-question-expand [label]="group" [background]="index % 2 === 0 ? 'even' : 'odd'">
        {{ form.controls[group].value | json }}

在最后一行我写了一些代码给我

{ "Q1-A": false, "Q1-B": "", "Q1-C": "", "Q1-Andet": "" }

但不知何故，我想将其评估为一个真假。是否有任何键具有值

标签： angularforms

这里的一种简单方法就是这样做：

hasOneValue(fg: FormGroup) {
  return Object.values(fg.controls).some(fc => !!fc.value);
}

{{ hasValue(form.controls[group]) }}

但这是一种低性能的方法，因为模板中的函数调用将评估列表中每个项目的每个更改检测周期。我自己，我更喜欢在需要时进行评估的东西，而不是在更改检测时（即，当表单值更改时）。最简单的方法是在您的组中使用验证器：

hasNoValues() {
  return (fg: FormGroup) => Object.values(fg.controls).some(fc => !!fc.value) ? null : {hasNoValues: true};
}

您将分配给您的组，例如：

this.formBuilder.group({..}, {validators: [hasNoValues()]})

你可以这样看：

{{ form.controls[group].errors?.hasNoValues }}

这里潜在的不良副作用是，如果没有至少一个值，它会将您的表单标记为无效。

如果这是不可接受的，您可以在循环中使用 valueChanges 的替代方法/修改您的 objectKeys 函数来实现此目的：

objectKeys(fg: FormGroup) }
   return Object.keys(fg.controls).map(group => {
     const hasValue$ = fg.controls[group].valueChanges.pipe(map(v => Object.values(v).some(v => !!v)));
     return {group, hasValue$};
   });
}

现在它返回一个键和可观察的数组，这里的问题是，因为它正在构建流，你需要从模板中取出这个函数调用并根据需要执行它（无论如何可能是一个好主意），所以在适当的地方你会添加：

this.groups = this.objectKeys(this.globalForm);

并且您需要记住，只要 globalForm 发生更改，然后只需通过以下方式访问：

<ng-container *ngFor="let group of groups; let index = index">
  <app-question-expand [label]="group.group" [background]="index % 2 === 0 ? 'even' : 'odd'">
    {{ group.hasValue$ | async }}

如果 globalForm 不经常更改，这很容易成为最安全和最高效的方法。

angular - 如果控件具有值，则标记角度形式组

问题描述

解决方案

推荐阅读