Angular2 <input> validation sélection basée

Question

J'ai une liste déroulante avec 2 valeurs {Nouveau, Utilisé} et en fonction de la sélection de l'utilisateur, la zone de texte de saisie correspondante est affichée.

Il y a un bouton suivant en bas de la page qui devrait devenir actif lorsque l'utilisateur a entré des miles ou des km pour la sélection d'un véhicule neuf ou d'occasion.

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> 

MACHINE A ECRIRE: -

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; 

} 

Am obtenir erreur ci-dessous lors du retour de fausse méthode tapuscrit ci-dessus et validation échoue lors du retour vrai.

Où est-ce que je me trompe?

Answer 1

Je peux suggérer un travail autour pour le ExpressionChangedAfterItHasBeenCheckedError.

Ceci est une véritable erreur comme l'a souligné ici houari https://stackoverflow.com/a/43375600/2708210

ce que vous pouvez faire est de faire l'appel à l'intérieur d'un setTimeout j'ai eu ce problème et ce fut un travail autour.

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

Maintenant, pour votre affaire tout à l'intérieur d'un setTimeout().

C'est un morceau de code à partir de mon application git link