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

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

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

1 个答案: