加载表单数据无法清除Angular2中的验证错误消息

Question

我是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);
}

验证器

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);
    });