使用 formbuilder 更改对象数组的值

Question

我在 angular 2 中使用 formbuilder 时遇到问题。我有以下情况。

我正在验证一封电子邮件，如果我已经在我清理该字段的员工数组中，如果允许则什么也不做。我是运行一个 foreach 来检查这个，在我的构造函数中我创建了 formbuild 并且引用部分如下所示：

我添加的与需求相关的对象是这样的。

我在输入中放置了一个模糊事件并执行了这个函数。

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

对于发送 2 个参数的函数，第一个是我需要测试的电子邮件，第二个是指向我正在处理的数组中的哪个对象的索引，我需要在这个索引中将字段归零。

如何做到这一点？

我的html是：

        <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>

我来自 formBuilder 的表单：

Answer 1

如果您想清除您的字段，您可以使用 patchValue 更改表单的一个元素，这也会更改您的输入字段

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

更新

如果电子邮件没有雇员，您仍然可以对嵌套数组使用 patchValue。您可以在模糊事件中传递值和索引

<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: ''
})

}

你可以从 *ngFor 获取员工的索引，令 i=index

使用 formbuilder 更改对象数组的值

Changing value of an object array with formbuilder

formbuilder

angular2-formbuilder

angular