angular 2 避免重复绑定表达式

【问题标题】：angular 2 avoid repeating binding expressionangular 2 避免重复绑定表达式
【发布时间】：2017-08-28 05:48:10
【问题描述】：

通过 Angular2，有没有办法重构两个以下按钮元素的绑定表达式？

<input #c1="ngModel">
<input #c2="ngModel">
<input #c3="ngModel">
<input #c4="ngModel">
<input #c5="ngModel">
<input #c6="ngModel">
<button [disabled]='c1.invalid || c2.invalid || c3.invalid || c4.invalid || c5.invalid || c6.invalid'>b1</button>
<button [disabled]='c1.invalid || c2.invalid || c3.invalid || c4.invalid || c5.invalid || c6.invalid'>b2</button>

【问题讨论】：

标签： angular binding

【解决方案1】：

在这种情况下最好使用 FORM，您只需要检查表单是否有效以禁用按钮并相应地切换。像这样

<form [formGroup]="customForm">
  <input formControlName='c1'>
  <input formControlName='c2'>
  <input formControlName='c3'>
  <input formControlName='c4'>
  <input formControlName='c5'>
  <input formControlName='c6'>
  <button [disabled]='!customForm.valid'>b1</button>
  <button [disabled]='!customForm.valid'>b2</button>
</form>

【讨论】：

同一表单\页面中有更多字段不应该影响这两个按钮。
那么您可以相应地调用禁用属性上的方法，使用或不使用表单。