我在formcomponent类中有一个数组,并希望能够将该数组传递给验证器函数.在表单中添加多个验证器时,我使用的是Validators.compose函数.这只接受验证器函数的名称,而不接受任何要传递的参数.是否可以在"compose"函数内的函数调用中添加参数?
export class ClientFormComponent
{
clientForm: ControlGroup;
npi: AbstractControl;
name: AbstractControl;
constructor(private _clientService: ClientService, _fb: FormBuilder) {
this.clientForm = _fb.group({ 'name': ['', Validators.compose([Validators.required])], 'npi': ['', Validators.compose([Validators.required, npiNumValidator, Validators.maxLength(10), Validators.minLength(10)])]});
this.name = this.clientForm.controls['name'];
this.npi = this.clientForm.controls['npi'];
}
@Input() clientList;
active = true;
onSubmit(value: Client) {
this._clientService.addDeleteClient(value, true)
.subscribe(
client => this.clientList.push(client));
}
}
function npiNumValidator(control: Control): { [s: string]: boolean } {
if (isNaN(control.value)) {
return { npiNAN: true };
}
}Run Code Online (Sandbox Code Playgroud)
谢谢你的帮助!
我已经通过模板驱动的表单实现了一个自定义表单控件,该表单控件将输入包装为html并添加了标签等。它与ngModel上的2way数据绑定可以很好地与表单进行对话。问题是,表单在初始化时会自动标记为脏的。有没有一种方法可以防止这种情况发生,因此我可以在表单上使用这些属性,它们将是准确的?
自定义选择器(除了自动标记为脏以外,此方法还可以正常工作):
<form class="custom-wrapper" #searchForm="ngForm">
{{searchForm.dirty}}
{{test}}
<custom-input name="testing" id="test" label="Hello" [(ngModel)]="test"></custom-input>
<pre>{{ searchForm.value | json }}</pre>
</form>Run Code Online (Sandbox Code Playgroud)
自定义输入模板:
<div class="custom-wrapper col-xs-12">
<div class="row input-row">
<div class="col-xs-3 col-md-4 no-padding" *ngIf="!NoLabel">
<label [innerText]="label" class="inputLabel"></label>
</div>
<div class="col-xs-9 col-md-8 no-padding">
<input pInput name="cust-input" [(ngModel)]="value" />
</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
自定义输入组件:
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Component, Input, forwardRef } from "@angular/core";
@Component({
selector: "custom-input",
template: require("./custom-input.component.html"),
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => QdxInputComponent),
multi: true
}
] …Run Code Online (Sandbox Code Playgroud)