2番のフォームビルダに問題があります。次のようなシナリオがあります。formbuilderを使用したオブジェクト配列の値の変更
電子メールを検証しています。従業員の配列内に既にフィールドがある場合は、何もしないでください。
私は、需要に関するaddがオブジェクトがこれである:私は私のコンストラクタで、私はformbuildと参照先の部分はこのようになります作成し、これを確認するためのforeachを実行していますよ。
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>
マイ形式:
てみましょうあなたが達成したいものを非常に明確ではありませんおよび/またはどこに従業員に* ngForからインデックスを取得することができ、あなたのblurイベントに
を値とインデックスを渡すことができます問題はです。 2番目のパラメータとしてインデックスを取得できませんか? –
合意したw/@ P.Moloney - あなたのコンポーネントテンプレートから '(blur)=" verifyEmail() "'を呼び出す場合は、 'letで宣言した後にhtmlのインデックスを渡すことができるはずですあなたの '* ngFor'ステートメントでは' i = index'となります。しかし、それが問題であればテンプレートHTMLを見なければなりません。 –
私のフィールドをクリアしたいのでフィールドに値を設定する必要があるので、問題が起こっています。モデルは簡単にできます:myModel = "必要な文字列"しかしformBuilderを使用しています。 0人、1人またはinfinitorの従業員を持つ。 –