각도 4의 확인란 변경을 기반으로 입력시 유효성 검사 실행

Question

키 값 배열을 반복하여 형제가 비활성화 된 입력란이있는 체크 박스 목록을 만듭니다. 각 확인란을 선택하면 형제 입력 텍스트 필드가 활성화되고 필요합니다. 이보기에는 '이전'및 '다음'버튼이 있으며 사용자가 확인란을 선택한 다음 필요한 형제 입력을 입력하지 않으면 '다음'버튼이 비활성화되어야합니다. 나는 거의 작동하지만, 사용자가 상자를 확인하자마자 '다음'버튼이 비활성화되어야하므로 필요한 텍스트 입력에 아무 것도 입력하지 않았을 것입니다. 현재 '다음'버튼은 사용자가 확인란을 선택하고 형제 입력에 초점을 맞춘 다음 입력하지 않고 나가면 비활성화됩니다.

내 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; 
    } 
    } 

어떻게 형제 입력 유효성을 검사 할 수 있습니다 사용자가 체크 박스를 체크하면?

Answer 1

next 버튼의 상태는 keyup 이벤트가 입력 될 때만 업데이트됩니다. 게다가, 그것은 하나의 값인 입력으로 업데이트됩니다.하지만 당신이 말하는 것에 따라, ngFor의 모든 입력이 채워 졌는지 확인해야합니다.

귀하의 입력 값을 모델에 저장하고 입력 변경 또는 체크 박스가 선택 될 때마다 모든 프로모션에 대한 프로모션 비용이 유효한지 확인하십시오.

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