在Angular2中加载表单数据未清除验证错误消息

Question

Iam Angular2中的新手。

我有一个模型驱动的反应形式有四个字段可以说a，b，c，d。

只要用户输入a，b，c的值，就会从休息服务中填充输入d的值。

我有一个验证已经存在于d这样只应该输入HH：MM：SS形式的值。

问题 - 输入a，b，c的值后，我从休息服务获得适当的响应，即字段d的形式HH：MM：SS的值。但验证错误消息仍然存在。我希望只要字段由休息后端服务填充，该验证错误消息就会被删除。

PS - 如果用户手动输入表格HH：MM：SS的值，则会删除此验证消息。

我的HTML代码如下 -

<input type="text" name="d" [value]="app.d" 
    formControlName="d"> 
    <div *ngIf="updateform.controls['d']"> 
     <p *ngIf="updateform.controls['d'].hasError('invalidDuration')"> 
     Please enter value in HH:MM:SS 
     </p> 
    </div> 

Component.ts

app:app_type={ 
    a : '' , 
    b : '' , 
    c : '' , 
    d : '' 
    }; 


ngOnInit() { 
this.updateform = new FormGroup ({ 
d: new FormControl("",validateDuration) }) 
} 

// this method is called whenever values of a , b , c is entered 
checkValueExists(selectedValue:string){ 

let aa = this.updateform.controls['a'].value; 
let bb = this.updateform.controls['b'].value; 
let cc = this.updateform.controls['c'].value; 

if (aa&&bb&&bb){ 
let query ="aa="+aa+"&&bb="+bb+"&&cc="+cc 
this._service.getDetails(query) 
.subscribe(
    result => { 
    console.log(result); 
    this.app=result; 
    }); 

} 

} 

服务

getDetails(query:string):Observable<app_type>{ 
    let url="http://localhost:9001/ang/webapi/abc" 
    console.log(url) 
    let temp = url + "/?" + query; 
    console.log(temp) 
    return this.http.get(url + "/?" + query, this.options) 
    .map(this.extractData) 
    .catch(this.handleError); 
} 

private extractData(res: Response) { 
     let body = res.json(); 
     return body || {}; 
} 
private handleError(error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 

Validator.ts

export function validateDuration(control: AbstractControl) { 
if (!control.value.match(/^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/)) { 
    return { 'invalidDuration': true}; 
} 
return null ; 
} 

Answer 1

请勿将反应形式与[value]混合使用。接收来自服务的价值时，在你的代码

<input type="text" name="d" formControlName="d"> 

设置它：：

this._service.getDetails(query) 
    .subscribe(
    result => { 
     console.log(result); 
     this.app=result; 
     this.updateform.get('d').setValue(result.d); 
    });