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:

It is not very clear what you want to achieve and/or where the issue is. Are you not able to get the index as the second parameter? — P. Moloney
– P. Moloney, Commented Sep 14, 2017 at 12:13
Agreed w/ @P.Moloney - if you're calling (blur)="verifyEmail()" from your component template, you should likely be able to pass in the index from your html, after declaring it with let i=index in your *ngFor statement. But we'll have to see your template HTML, if that is the issue. — Jack Koppa
– Jack Koppa, Commented Sep 14, 2017 at 12:21
My problem is happening because I want to clear my field, I need to set a value in the field, with model would be easy to do so: myModel = "the string I want" but I'm using formBuilder and besides I can have 0, 1 or infinitor employees. — Renan Rodrigues
– Renan Rodrigues, Commented Sep 14, 2017 at 12:31
I added my html in the question, although it is not related to it. Again the problem is that I am trying to clear the field. — Renan Rodrigues
– Renan Rodrigues, Commented Sep 14, 2017 at 12:33
your issue is not very clear, why don't you clear your email field by passing empty string or null to your form element. you have formControlName thus, whatever value you will set in your ts file for that element in the form, html would display — JayDeeEss
– JayDeeEss, Commented Sep 14, 2017 at 12:36

JayDeeEss · Accepted Answer · 2017-09-14 13:21:50Z

2

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

edited Sep 14, 2017 at 13:21

answered Sep 14, 2017 at 12:53

JayDeeEss

1,0839 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JayDeeEss Over a year ago

try updated answer, i tried in plunker and it works!

Renan Rodrigues Over a year ago

Ufa ! Thank you very much!

Collectives™ on Stack Overflow

Changing value of an object array with formbuilder

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related