Angular2 Validierung Auswahl basierend

Question

Ich habe eine Dropdown-Liste mit 2 Werten {New, Used} und auf der Grundlage der Benutzerauswahl das entsprechende Eingabetextfeld angezeigt wird.

Am unteren Rand der Seite befindet sich eine Schaltfläche, die aktiviert werden soll, wenn der Benutzer Meilen oder Kilometer für die Auswahl eines neuen oder neuen Fahrzeugs eingegeben hat.

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> 

Typoskript: -

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 bekommen Fehler unten, wenn sie von Typoskript Methode oben und Validierung falsche Rückkehr schlägt fehl, wenn wahr zurück.

Wohin gehe ich falsch?

Answer 1

kann ich eine Arbeit um für die ExpressionChangedAfterItHasBeenCheckedError vorschlagen.

Dies ist ein echter Fehler wie hier https://stackoverflow.com/a/43375600/2708210 von gunter wies darauf hin,

, was Sie tun können, ist den Anruf innerhalb eines SetTimeout mache ich dieses Problem hatte, und das war um eine Arbeit.

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

Jetzt für Ihren Fall alles innerhalb einer setTimeout().

Dies ist ein Stückchen Code aus meinem app git link