ReactiveFormsModuleを使用しており、const構成内のValidators.required
などの単純なバリデーターを含むすべてのフォームコントロールを定義しています。
これらのFormControlの1つにカスタムバリデーターを追加したかったのです。
現在、この構成内の関数としてカスタムバリデーターを追加しており、正常に機能していますが、ここには属していないため、コンポーネント内に実際に存在する必要がありますが、カスタムバリデーターを単に添付する方法はわかりませんFormBuilder
がすべてのコントロールを構成した後、手動で。
以下のコードコメントを参照
ここに添付するにはどうすればよいですか
* ??? *
this.form.get( 'site_id')。add custom valiator
これは現在の構成コードです。
import {FormControl, Validators, FormBuilder} from '@angular/forms';
var fb = new FormBuilder();
function exampleValidator(control: FormControl): { [s: string]: boolean} {
if (control.value === 'Example'){
return { example: true };
}
return null;
}
export const formConfig = fb.group({
'extract_batch_id': ['bbbbbbbbbbbbb',
[
Validators.required
]],
'site_id': ['blah',
[
Validators.required,
exampleValidator
]]
});
私は本当にカスタムバリデータを保存する必要があるディレクティブを持っています
ジョブ検索コンポーネント
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';
import {ActivatedRoute} from '@angular/router';
import {Subscription} from 'rxjs';
import {Job} from '../../../models/job';
import {JobService} from '../../../services/api/job.service';
import {DebugService} from '../../../common/debug/debug.service';
import {formConfig} from './edit.form-config';
@Component({
selector: 'wk-job-search-edit',
template: require('./edit.html')
})
export class JobSearchEditComponent {
form: FormGroup;
job: Job;
@Input() jobId: number;
private subscription: Subscription;
constructor(
private route: ActivatedRoute,
private jobService: JobService,
private debug: DebugService){
// Configure form FormGroup via exported formConfig
this.form = formConfig;
// How do I Attach Here
// *** ??? ***
// this.form.get('site_id').add custom valiator
}
/*
exampleValidator(control: FormControl): { [s: string]: boolean} {
if (control.value === 'Example'){
return { example: true };
}
return null;
}
*/
}
JobSearch Edit.html
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<button type="submit" class="btn btn-success" [disabled]="!form.valid">Save</button>
<div class="form-group" [ngClass]="{'has-danger':!form.get('extract_batch_id').valid}">
<label for="extract_batch_id" class="form-control-label">Extract Batch</label>
<input id="extract_batch_id" formControlName="extract_batch_id" type="text" placeholder="Extract Batch" class="form-control input-sm">
<div *ngIf="!form.get('extract_batch_id').valid">
<div class="form-control-feedback">Extract Batch is required?</div>
<small class="form-text text-muted">Please enter a Extract Batch, eg. xyz.</small>
</div>
</div>
<div class="form-group" [ngClass]="{'has-danger':!form.get('site_id').valid}">
<label for="site_id" class="form-control-label">Site</label>
<input id="site_id" formControlName="site_id" type="text" placeholder="Site" class="form-control input-sm">
<div *ngIf="!form.get('site_id').valid">
<div class="form-control-feedback">Site is required?</div>
<small class="form-text text-muted">Please enter a Site, eg. xyz.</small>
</div>
</div>
</form>
あなたのコードを見て、あなたができること:
<div class="form-group" [ngClass]="{'has-danger':!form.get('site_id').valid}">
<label for="site_id" class="form-control-label">Site</label>
<input id="site_id" [formControl]="site_id_control" type="text" placeholder="Site" class="form-control input-sm">
<div *ngIf="!form.get('site_id').valid">
<div class="form-control-feedback">Site is required?</div>
<small class="form-text text-muted">Please enter a Site, eg. xyz.</small>
</div>
</div>
[formControl] = "site_id_control"を見てください
次に、この方法で、次のように特定のコントロールにバリデーターを追加または削除できます。
クラス内:
export class JobSearchEditComponent {
private site_id_control=this.form.controls['site_id'];
updateValidator(){
let exisitingValidators = this.site_id_control.validators;
this.site_id_control.setValidators(Validators.compose([...existingValidators , exampleValidator]))
// you probably also need this :
this.site_id_control.updateValueAndValidity();
}
}