Changing value of an object array with formbuilder

Question

I am having problem with formbuilder in angular 2. I have the following scenario.

I am validating an email, if I already have within the array of employees I clean the field, if it is allowed do nothing. I'm running a foreach to check this, in my constructor I create the formbuild and the referent part looks like this:

The object I add relating to demand is thus.

I put a blur event in the input and execute this function.

public verifyEmail(employee_email: string, index) {
  if (employee_email === '') {
    return;
  }

  let ocorrency = 0;
  this.formOrganization.value.employees.forEach(employee => {
    if (employee.email === employee_email) {
      ocorrency += 1
    }
  });

  if (ocorrency >= 2) {
    this.messageNotify(false, 'email_already_exists');
    this.formOrganization.get('employees')[index].patchValue({'email': ''});
  }
}

For the function to send 2 parameters, the first is the email that I need to test and the second the index that refers to which object within the array I am working on, it is in this index that I need to zero the field.

How to do this ?

My html is:

        <div class="col-md-12 col-12 tabs-content" *ngIf="membersTabs">
      <div class="row" formArrayName="employees">
        <div class="col-12">
          <button class="btn btn-new pull-left" (click)="addEmployeer()">Adicionar Membros</button>
        </div>
        <div class="col-12">
          <div class="card card-members"
               *ngFor="let employeer of formOrganization.controls.employees.controls; let index = index"
               [formGroupName]="index">
            <div class="card-header">
              <div class="col-sm-12 col-md-8">
                <strong class="text-capitalize">{{formOrganization.value.employees[index].first_name}}
                  {{formOrganization.value.employees[index].second_name}}</strong>
              </div>
              <div class="wrapper-switch col-sm-12 col-md-4">
                <div class="row">
                  <div class="col-sm-12 col-md-6">
                    <button class="btn btn-new btn-transparent" *ngIf="formOrganization.value.employees[index]._id"
                            (click)="[changePasswordSelected(employeer.value), passwordModal.show()]">ALTERAR SENHA
                    </button>
                  </div>
                  <div class="col-sm-12 col-md-6">
                    <button class="btn btn-cancel" (click)="removeEmployeer(index)">Remover</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-block">
              <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12 form-group">
                  <label class="col-md-10 form-control-label">Primeiro Nome</label>
                  <div class="col-md-12">
                    <input class="form-control " name="first_name" type="text"
                           formControlName="first_name">
                  </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 form-group">
                  <label class="col-md-10 form-control-label">Sobrenome</label>
                  <div class="col-md-12">
                    <input class="form-control " name="second_name" type="text"
                           formControlName="second_name">
                  </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 form-group">
                  <label class="col-md-10 form-control-label">Cargo</label>
                  <div class="col-md-12">
                    <input class="form-control " name="office" type="text" formControlName="office">
                  </div>
                </div>
                <div class="col-lg-2 col-md-6 col-sm-12 form-group">
                  <label class="col-md-10 form-control-label">Acesso</label>
                  <div class="col-md-12">
                    <select class="form-control modal-input" id="access" name="access" formControlName="access">
                      <option value="">Selecione a opção</option>
                      <option *ngFor="let item of accesss"
                              [selected]="item.name == employeer.value.access.name"
                              [ngValue]="item">{{item.name}}
                      </option>
                    </select>
                  </div>
                </div>
                <div class="col-lg-2 col-md-1 col-sm-12 form-group">
                  <label class="col-md-10 form-control-label">Status</label>
                  <div class="col-md-12">
                    <label class="switch switch-text switch-pill switch-primary">
                      <input type="checkbox" class="switch-input " formControlName="status">
                      <span class="switch-label" data-on="On" data-off="Off"></span>
                      <span class="switch-handle"></span>
                    </label>
                  </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 form-group">
                  <label class="col-md-10 form-control-label">Email</label>
                  <div class="col-md-12">
                    <input class="form-control " name="email" type="text" formControlName="email"
                           (blur)="verifyEmail(formOrganization.value.employees[index].email, index)">
                  </div>
                </div>
                <div class="col-lg-4 col-md-5 col-sm-12 form-group"
                     *ngIf="!formOrganization.value.employees[index]._id">
                  <label class="col-md-10 form-control-label">Senha</label>
                  <div class="col-md-12">
                    <input class="form-control " name="password" type="password"
                           formControlName="password">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

My form from formBuilder:

Answer 1

if you want to clear you field you can use patchValue to change one element of your form and that will change your input field as well

this.formOrganization.patchValue({
  email: ''
});

Update

If email is under employess you can still use patchValue for nested array. you can pass the value and index in your blur event

<label class="center-block">email:
            <input class="form-control" #email formControlName="email" (blur)="test(email.value,i)">
          </label>


test(value, index){
let x = <FormArray>this.heroForm.get('employees');
let y =   (<FormControl>x.controls[index])

y.patchValue({
  email: ''
})

}

you can get index from *ngFor on employees, let i=index