小编Boh*_*s27的帖子

Angular 2将参数传递给验证器函数

我在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)

谢谢你的帮助!

typescript angular

8
推荐指数
2
解决办法
1万
查看次数

Angular4从脏支票中排除属性

我已经通过模板驱动的表单实现了一个自定义表单控件,该表单控件将输入包装为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)

angular2-forms angular angular4-forms

2
推荐指数
1
解决办法
1889
查看次数