运行根据 Angular 中复选框的更改对输入进行验证 4

Question

我正在遍历一组键值以创建一个复选框列表，每个复选框都有一个同级禁用输入。选中每个复选框后，同级输入文本字段将被启用并且是必需的。在此视图中，有一个 'previous' 和 'next' 按钮，如果用户选择了一个复选框然后未在其所需的同级输入中输入任何内容，则应禁用 'next' 按钮。我几乎可以正常工作，但是一旦用户选中该框，'next' 按钮就应该被禁用，因为这意味着他们没有在所需的文本输入中输入任何内容。现在 'next' 按钮仅在用户选中复选框、关注同级输入然后离开而不输入时才会禁用。

我的HTML...

<div *ngFor="let promotion of promotionOptions; let i = index">
    <div class="col-md-6 input-container radio-label">
        <mat-checkbox [checked]="!promotion.key" (change)="promotion.key = !promotion.key">
            {{ promotion.name }}
        </mat-checkbox>
    </div>
    <mat-input-container>
        <input matInput [disabled]="promotion.key" placeholder="Cost" name="promotionCost{{i}}" #promotionCost="ngModel" [ngModel]="" (keyup)="promotionCostInput($event.target.value)"
            [required]="!promotion.key" type="number">
        <div *ngIf="promotionCost.errors && (promotionCost.dirty || promotionCost.touched)" class="alert alert-danger cost-alert">
            <div [hidden]="!promotionCost.errors.required">Please enter the checked promotion's cost</div>
        </div>
    </mat-input-container>
</div>

<div class="clearfix"></div>

<div class="button-container">
    <button class="main-btn dark icon-left" (click)="updateStep(1)"><i class="fa fa-angle-left"></i>Previous</button>
    <button class="main-btn icon-right" (click)="updateStep(3)" [disabled]="!promotionCostValid">Next<i class="fa fa-angle-right"></i></button>
</div>

以及我在 .ts 文件中使用的禁用 'next' 按钮的方法：

promotionCostInput(value) {
    if (!value) {
      this.promotionCostValid = false;
    } else {
      this.promotionCostValid = true;
    }
  }

当用户选中复选框时，如何验证同级输入？

Answer 1

您的问题是 next 按钮的状态仅在您的任何输入触发 keyup 事件时才会更新。此外，它仅使用 one 输入的值进行更新，但根据您所说的，您想检查 ngFor 的每个输入是否已填充。

我建议您将输入的值存储在您的模型中，并在输入更改或选中复选框时随时检查促销成本是否对所有促销有效。

<div *ngFor="let promotion of promotionOptions; let i = index">
  <div class="col-md-6 input-container radio-label">
    <mat-checkbox [checked]="!promotion.key" (change)="promotion.key = !promotion.key; checkPromotionCost();">
      {{ promotion.name }}
    </mat-checkbox>
  </div>
  <mat-input-container>
    <input
      matInput
      [disabled]="promotion.key"
      placeholder="Cost"
      name="promotionCost{{i}}"
      (keyup)="promotion.cost = $event.target.value; checkPromotionCost();"
      [required]="!promotion.key" type="number"
    >
    <div *ngIf="promotionCost.errors && (promotionCost.dirty || promotionCost.touched)" class="alert alert-danger cost-alert">
      <div [hidden]="!promotionCost.errors.required">
        Please enter the checked promotion's cost</div>
      </div>
  </mat-input-container>
</div>

<div class="clearfix"></div>

<div class="button-container">
  <button class="main-btn dark icon-left" (click)="updateStep(1)"><i class="fa fa-angle-left"></i>Previous</button>
  <button class="main-btn icon-right" (click)="updateStep(3)" [disabled]="!promotionCostValid">Next<i class="fa fa-angle-right"></i></button>
</div>

在控制器中：

checkPromotionCost() {
  this.promotionCostValid = true;
  this.promotionOptions.forEach(promotion => {
    if (promotion.key && promotion.cost === '') {
      this.promotionCostValid = false;
    }
  });
}

运行根据 Angular 中复选框的更改对输入进行验证 4

Run validation on input based on change of checkbox in Angular 4

html

javascript

angular-validation

angular

angular-forms

运行 根据 Angular 中复选框的更改对输入进行验证 4

Run validation on input based on change of checkbox in Angular 4

html

javascript

angular-validation

angular

angular-forms

运行根据 Angular 中复选框的更改对输入进行验证 4