Angular2 <input>基於驗證選擇

我有一個下拉菜單，其中有兩個值{New，Used}，並根據用戶選擇顯示相關的輸入文本框。Angular2 <input>基於驗證選擇

頁面底部有一個下一個按鈕，當用戶輸入數英里或千米作爲舊車或新車的選擇時，該按鈕應該激活。

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>

打字稿： - 返回true當

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時，下面的錯誤失敗。

我哪裏錯了？

來源

2017-08-02 Maiur Laximidas

我可以提出一個變通爲ExpressionChangedAfterItHasBeenCheckedError。

這是由岡特這裏https://stackoverflow.com/a/43375600/2708210

指出，你可以做的就是讓一個setTimeout的，我有這個問題，這是一個變通的內部調用一個真正的錯誤。

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

現在對於你的情況了setTimeout()內的一切。

這是代碼我的應用程序一個peice的git link

來源

2017-08-02 09:14:36

，我沒有工作 - 還是同樣的問題 –

Angular2 <input>基於驗證選擇

回答

相關問題