Как удалить ошибку проверки после ввода правильных входных значений с помощью angular8

Я использую реактивные формы, где я поставил ошибку проверки для номера телефона, если я дал менее 10-значное число, тогда он должен отображать сообщение об ошибке, когда есть 10 номеров, сообщение проверки должно быть скрыто. Но вот все время этот валидационный номер остается одним и тем же.

ДЕМО: ДЕМО

HTML:

<div class="form-group">
                <label for="">Phone Number <span class="text-danger">*</span></label>
                <input type="text" class="form-control" placeholder="(###) ### - ####" formControlName="agentPhone"
                  name="phoneNumber" autocomplete="new-phone" (keypress)=_keyPress($event)
                  [ngClass]="{ 'is-invalid': submitted && detailsInfo.agentPhone.errors }" appPhoneMask maxlength="14">
                <div *ngIf="submitted && detailsInfo.agentPhone.errors" class="invalid-feedback">
                  <div *ngIf="detailsInfo.agentPhone.errors.required">Phone number is required</div>
                  <div *ngIf="detailsInfo.agentPhone.errors.pattern">please enter valid Phone number</div>
                </div>
              </div>

Ts:

  _keyPress(event: any) {
    const pattern = /[0-9]/;
    let inputChar = String.fromCharCode(event.charCode);
    if (!pattern.test(inputChar)) {
        event.preventDefault();

    }
}

this.agentbasicInfoForm = this.FB.group({
        agentPhone: ['', [Validators.required,Validators.pattern('[1-9]\\d{9}')]],
})