基于

Question

我有2个值{New，Used}的下拉列表，并根据用户选择显示相关的输入文本框。

页面底部有一个下一个按钮，当用户输入里程或公里用于使用或选择新车时，该按钮将变为活动状态。

HTML

<div class="form-group" style="width:50%">
 <label class="label label-info" for="SelectedCarType">Claim Type:</label>
 <select class="form-control" formControlName="selectedCarType" 
  [(ngModel)]="selectedCarType" name="SelectedCarType" id="SelectedCarType">
  <option *ngFor="let c of CarTypes" [value]="c.CarId">{{c.CarDescription}}
  </option> 
 </select>
</div>

<div *ngIf="selectedCarType ==1" class="form-group" style="width:50%">
 <label class="label label-info" for="Mileage">Mileage:</label>
 <input class="form-control" type="number" formConrolName="miles" 
 name="Mileage" id="Mileage" 
 (input)="convert($event.target.value,$event.target.id)" value="{{miles}}" 
 />
</div>

<div *ngIf="selectedCarType ==1" class="form-group" style="width:50%">
<label class="label label-info" for="Kilometres">Kilometres:</label>
<input class="form-control" type="number" formControlName="km" 
 name="Kilometres" id="Kilometres" 
 (input)="convert($event.target.value,$event.target.id)" value="{{km}}"  />
</div>

<div *ngIf="selectedCarType ==2" class="form-group" 
 style="width:50%">
  <label class="label label-info" for="MileageTravelled">Mileage Used:
  </label>
  <input class="form-control" type="number" formControlName="milesUsed" 
   name="MileageTravelled" id="MileageTravelled" 
   (input)="convert($event.target.value,$event.target.id)" value="
   {{milesUsed}}" />
</div>

<div *ngIf="selectedCarType ==2" class="form-group" style="width:50%">
 <label class="label label-info" for="KilometresTravelled">Kilometres Used:
 </label>
 <input class="form-control" type="number" formControlName="kmUsed" 
   name="KilometresTravelled" id="KilometresTravelled" 
   (input)="convert($event.target.value,$event.target.id)" value="
   {{kmUsed}}" />
</div>

<button kendoButton [disabled]="!myForm.valid"  id="btnSearch" 
   [primary]="true" (click)="redirect()">Next</button>

打字稿： -

export class Vehicle implements OnInit 
{
    public selectedCarType: number;
    public myForm: FormGroup;
    public km: number;
    public miles: number;

    this.myForm = this.fb.group({
        selectedCarType: [null, Validators.required],
        miles:[null, (control) => this.checkIsValid(control)],
        km: [null, (control) => this.checkIsValid(control)],
        kmUsed: [null, (control) => this.checkIsValid(control)],
        milesUsed: [null, (control) => this.checkIsValid(control)]
    });
}

checkIsValid(control: FormControl): { [key: string]: boolean }
{
   if (this.selectedCarType === 1)//New
   {
     if (control.value === null)
     {
         return { "Mileage or Km cannot be null": false };
     }

   }
   if (this.selectedCarType === 2)//Used
   {
     if (control.value === null)
     {
        return { "MileageUsed or KilometresUsed cannot be null": false };
     }
   }
   return null;

}

从上面的typescript方法返回false时会出现以下错误，并且在返回true时验证失败。

我哪里错了？

Answer 1

我可以为ExpressionChangedAfterItHasBeenCheckedError建议解决。

这是枪手在https://stackoverflow.com/a/43375600/2708210

指出的真正错误

你可以做的是在setTimeout内部进行调用我有这个问题，这是一个解决方法。

 this.subscription = this.service.spinner$
  .subscribe(item => setTimeout(() => this.showProgress = item, 0));

现在为你的案例列出setTimeout()内的所有内容。

  

这是我的应用git link

的代码