在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>

组件.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);
}

验证器.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);
    });