Angular2 <вход> выбор проверки на основе

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;

}

Я получаю сообщение об ошибке ниже при возврате false из описанного выше метода машинописи, и при возврате true проверка не выполняется

Куда я иду не так?

Answer 1

Я могу предложить обходной путь для ExpressionChangedAfterItHasBeenCheckedError,

Это настоящая ошибка, как указал Гюнтер здесь /questions/14345014/expressionchangedafterithasbeencheckederror-explained/14345020#14345020

что вы можете сделать, это сделать вызов внутри setTimeout, у меня была эта проблема, и это было обходное решение.

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

Теперь для вашего случая все внутри setTimeout(),

Это кусок кода из моего приложения git link