Chargement des données de formulaire ne pas effacer le message d'erreur de validation dans Angular2

Question

Iam un débutant dans Angular2.

J'ai une forme réactive pilotée par un modèle ayant quatre champs disons a, b, c, d.

La valeur de l'entrée d est remplie à partir d'un service de repos dès que la valeur de a, b, c est entrée par l'utilisateur.

J'ai une validation déjà existante sur d telle que seule la valeur de la forme HH: MM: SS doit être entrée. - Après avoir entré la valeur de a, b, c, j'obtiens la réponse appropriée du service de repos, c'est-à-dire la valeur de la forme HH: MM: SS pour le champ d. Cependant le message d'erreur de validation reste toujours là. Je veux que ce message d'erreur de validation soit supprimé dès que le champ est rempli par le service backend.

PS - Ce message de validation est supprimé si une valeur de la forme HH: MM: SS est entrée manuellement par l'utilisateur.

Mon code HTML est comme suit: -

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

} 

} 

service

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

Ne pas mélanger la forme réactive avec [value]. Retirez-le de la commande:

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

Set dans votre code lors de la réception de la valeur du service:

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