Запуск проверки ввода на основе изменения флажка в Angular 4

Я просматриваю массив значений ключей, чтобы создать список флажков, для каждого из которых отключен входной сигнал брата или сестры. При установке каждого флажка одноуровневое текстовое поле для ввода становится активным и является обязательным. В этом представлении есть кнопки «предыдущий» и «следующий», а кнопка «следующий» должна быть отключена, если пользователь выбирает флажок, а затем ничего не вводит в требуемый вход для сестры. У меня это почти работает, однако кнопка «Далее» должна быть отключена, как только пользователь установит флажок, так как это будет означать, что он ничего не ввел в требуемый текстовый ввод. Прямо сейчас кнопка «Далее» становится неактивной, только если пользователь устанавливает флажок, фокусируется на входном элементе и затем выходит, не входя.

Мой 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 для отключения кнопки «Далее»:

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

Как я могу проверить ввод сестры, когда пользователь устанавливает флажок?


javascript angular html angular-forms angular-validation
person JordanBarber    schedule 14.11.2017    source источник
comment
попробуйте следующее: [disabled] =! promotionCostValid || PromotionCost.errors   -  person Fateh Mohamed    schedule 14.11.2017
comment
Спасибо за комментарий, Фатех, но я не думаю, что смогу использовать это вне цикла ngFor.   -  person JordanBarber    schedule 14.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Ваша проблема в том, что состояние вашей кнопки 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;
    }
  });
}
person etiennecrb    schedule 14.11.2017
comment
Спасибо, etiennecrb. Но я не понимаю, откуда взялось «promostion.cost». Он выдает ошибку из Angular Cli, что он не существует, и я заметил, что это где-то объявлено. - person JordanBarber; 14.11.2017
comment
Я только что добавил его в вашу модель, вы можете сделать что-то другое, если хотите, но его нужно где-то хранить. - person etiennecrb; 14.11.2017