即使输入字段具有值，Angular Validation也显示错误

Question

即使在文本字段中有值，此页面也会显示验证错误     https://i.stack.imgur.com/t2AQo.png

这是ts文件和HTML文件的以下代码。我使用了faces API，该API在搜索员工姓名时自动填充电子邮件框和便笺id框。

如图所示的输入字段即使具有一定的值也显示验证错误。

HTML代码：

<div class="form-group">
      <label for="validationDefault01">Email ID:</label>
      <input type="email" class="form-control" id="email" for="validationDefault01" name="email" [(ngModel)]="employee.email" #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required>
  <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
   <div *ngIf="email.errors.required">Email Id is required</div>
  </div>
</div>

component.ts文件的代码：

FacesTypeAhead.init($('#name')[0], {
       key : 'first;xyz@xyz.com',
       faces : {
       headerLabel : '',

  onclick : function(person) {
        $('#email').val(person.email);
        // document.getElementById('email').value = person.email;
        $.each(person, function(k, v) {

        if ( k === 'notes-id') {
           $('#notesId').val(v);
         }

        });
        $('#name').val(person.name);
        return person.name;
        }
        },
        topsearch : {
        headerLabel : 'xyz Results',
        enabled : true
        }
        });