使用formbuilder

Question

我在角度2中遇到formbuilder的问题。我有以下情况。

我正在验证一封电子邮件，如果我已经在我清理该字段的员工阵列中，如果允许什么都不做的话。我正在运行foreach来检查这个，在我的构造函数中我创建了formbuild，并且referent部分看起来像这样：

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

我在输入中放置了一个模糊事件并执行此功能。

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获得索引，让我=索引