2017-09-14 6 views
0

2 번 양식에서 formbuilder에 문제가 있습니다. 다음과 같은 시나리오가 있습니다.formbuilder를 사용하여 개체 배열의 값 변경

전자 메일 유효성을 검사하고 있습니다. 직원 배열 내에 이미 필드를 정리 한 경우 아무 것도하지 않으면 허용됩니다.

enter image description here

내가 수요에 관한 추가하는 목적은 이렇게이다 : 내 생성자에서 나는 formbuild을 생성하고 지시 대상 부분은 다음과 같습니다,이를 확인하기 위해 foreach 문을 실행하고 있습니다.

enter image description here

은 I 입력에 흐림 이벤트를 넣고이 기능을 수행한다. 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': ''}); 
    } 
} 

, 첫 번째 I 테스트해야 이메일 어느 I가 일하고 배열 내의 객체를 참조 번째 인덱스이며,이 지표로되어 I 필드를 제로화 할 필요가있다.

어떻게 하시겠습니까?

내 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에서 인덱스를 얻을 수 있습니다 흐림 이벤트

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

을의 값과 인덱스를 전달할 수 문제가 있습니다. 색인을 두 번째 매개 변수로 가져올 수 없습니까? –

+0

동의 함/@ P.Moloney - 컴포넌트 템플릿에서'(blur) = "verifyEmail()"'을 호출하면,'let으로 선언 한 후 html의 인덱스를 전달할 수있을 것입니다. i = index'를 사용하면됩니다. 그러나 템플릿 HTML을 확인해야합니다. –

+0

내 필드를 지우고 싶기 때문에 문제가 발생했습니다. 모델에서 필드에 값을 설정해야합니다. myModel = "원하는 문자열"이지만 formBuilder를 사용하고 있습니다. 0, 1 또는 infinitor 종업원이 있어야합니다. –

답변

2

당신은 당신이 한 양식의 요소와 그 뜻을 변경할 수 patchValue를 사용할 수있는 필드 취소하려는 경우 입력란을 변경하십시오.

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

업데이트

전자 메일이 employess 아래에 있으면 중첩 된 배열에 대해 patchValue를 계속 사용할 수 있습니다. 당신은 내가 = 인덱스 당신이 및/또는 어디에서 무엇을 달성하고자하는 매우 명확하지 않다

+0

으로 업데이트했습니다. 나를 위해 작동하지 않습니다. –

+0

내 모든 formBuilder로 내 질문을 업데이트했습니다. –

+0

업데이트 된 답변을 시도해보십시오. 나는 plunker에서 시험했는데 작동합니다! – JayDeeEss