在 Angular Reactive Form 中禁用基于多个空 formControlNames 的按钮

Question

StackBlitz 示例

我有一个带有动态表单数组的反应式表单。 有一个按钮可以向表单添加新对象。 但是，我只希望在数组中的当前对象已填充/或已填充时“启用”此按钮。

 <div *ngIf="form">
  <form [formGroup]="form">
    <div formArrayName="justificationItems">
      <div *ngFor="let orgs of form.controls['justificationItems']?.controls;  let i = index"
        [formGroupName]="i">
        <input formControlName="name" placeholder="Item name">
        <input formControlName="description" placeholder="Item description">
        <input formControlName="code" placeholder="Item price">
        </div>
        <button [disabled]="!form.controls['justificationItems']?.controls.description" type="button" (click)="addItem()">Add Item</button>
      </div>
  </form>
</div>

我需要根据 3 个字段添加 disabled 属性以查看它们是否为空。 我从一个领域开始尝试这个：

[disabled]="!form.controls['justificationItems']?.controls.description"

我认为上面会查看描述字段，看看它是否有价值。

欢迎任何替代方法。 我认为问题在于它需要查看一个数组项。

StackBlitz 示例

Answer 1

你在这里分叉 Stackblitz。

检查最后一个数组项中的值并根据该值禁用按钮。

将按钮放置在循环 div 中以获取 i（索引）的访问权限

<button
      *ngIf="i == form.value.justificationItems.length - 1"
      [disabled]="
        !form.value.justificationItems[i].name ||
        !form.value.justificationItems[i].description ||
        !form.value.justificationItems[i].code
      "
      type="button"
      (click)="addItem()"
    >  Add Item
        </button>

Answer 2

我会使用 observable，主要是因为我喜欢处理模板中的所有逻辑，而且在我看来这更可重用，而不是在模板中输入所有控件。 如果您想对禁用进行更复杂的检查，或者如果您的表单控件名称发生更改，该怎么办？ 在我看来，这更容易处理。 但是，是的，这是一个意见，但想把它扔出去:)

所以监听formarray的valuechanges，此时只寻址数组中的最后一项，并检查这个对象的所有属性是否都有值：

  this.isDisabled$ = this.form.get('justificationItems').valueChanges.pipe(
    map(value => value[value.length-1]),
    map(val => Object.keys(val).some(x => val[x] === "")),
  )

然后在模板中使用为您取消订阅的async管道:)

<button [disabled]="isDisabled$ | async" type="button" (click)="addItem()">Add Item</button>

我在上面使用了 Object.keys，因为 Stackblitz 不喜欢我使用 Object.values，所以 Object.values 也是一种有效的方法！

演示