2 번 양식에서 formbuilder에 문제가 있습니다. 다음과 같은 시나리오가 있습니다.formbuilder를 사용하여 개체 배열의 값 변경
전자 메일 유효성을 검사하고 있습니다. 직원 배열 내에 이미 필드를 정리 한 경우 아무 것도하지 않으면 허용됩니다.
는내가 수요에 관한 추가하는 목적은 이렇게이다 : 내 생성자에서 나는 formbuild을 생성하고 지시 대상 부분은 다음과 같습니다,이를 확인하기 위해 foreach 문을 실행하고 있습니다.
은 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>
내 양식 :
을하자, 당신은 직원에 * ngFor에서 인덱스를 얻을 수 있습니다 흐림 이벤트
을의 값과 인덱스를 전달할 수 문제가 있습니다. 색인을 두 번째 매개 변수로 가져올 수 없습니까? –
동의 함/@ P.Moloney - 컴포넌트 템플릿에서'(blur) = "verifyEmail()"'을 호출하면,'let으로 선언 한 후 html의 인덱스를 전달할 수있을 것입니다. i = index'를 사용하면됩니다. 그러나 템플릿 HTML을 확인해야합니다. –
내 필드를 지우고 싶기 때문에 문제가 발생했습니다. 모델에서 필드에 값을 설정해야합니다. myModel = "원하는 문자열"이지만 formBuilder를 사용하고 있습니다. 0, 1 또는 infinitor 종업원이 있어야합니다. –