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>基于验证选择

回答

相关问题