2017-09-14 22 views
0

2番のフォームビルダに問題があります。次のようなシナリオがあります。formbuilderを使用したオブジェクト配列の値の変更

電子メールを検証しています。従業員の配列内に既にフィールドがある場合は、何もしないでください。

enter image description here

私は、需要に関するaddがオブジェクトがこれである:私は私のコンストラクタで、私はformbuildと参照先の部分はこのようになります作成し、これを確認するためのforeachを実行していますよ。

enter image description here

Iは入力でblurイベントを入れて、この機能を実行します。 2つのパラメータを送信する機能については

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

、最初は、私はどの私が働いているアレイ内のオブジェクトを参照し、インデックスをテストし、二する必要が電子メールである、それは私、この指標でありますフィールドをゼロにする必要があります。

これを行う方法?

私のHTMLは次のとおりです。formBuilderから

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

マイ形式:

enter image description here

+0

てみましょうあなたが達成したいものを非常に明確ではありませんおよび/またはどこに従業員に* ngForからインデックスを取得することができ、あなたのblurイベントに

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

を値とインデックスを渡すことができます問題はです。 2番目のパラメータとしてインデックスを取得できませんか? –

+0

合意したw/@ P.Moloney - あなたのコンポーネントテンプレートから '(blur)=" verifyEmail() "'を呼び出す場合は、 'letで宣言した後にhtmlのインデックスを渡すことができるはずですあなたの '* ngFor'ステートメントでは' i = index'となります。しかし、それが問題であればテンプレートHTMLを見なければなりません。 –

+0

私のフィールドをクリアしたいのでフィールドに値を設定する必要があるので、問題が起こっています。モデルは簡単にできます:myModel = "必要な文字列"しかしformBuilderを使用しています。 0人、1人またはinfinitorの従業員を持つ。 –

答えて

2

あなたはフィールドをクリアしたい場合は、1つのフォームの要素と、その意志を変更するpatchValueを使用することができます入力フィールドも変更してください。

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

更新

電子メールがemployessの下にある場合、ネストされた配列にはまだpatchValueを使用できます。あなたは、私は=インデックス

+0

それは私にとっては役に立ちません –

+0

私のすべてのformBuilderで質問を更新しました –

+0

更新された回答を試してみました。 – JayDeeEss

関連する問題