Question

我希望从app.component.html对我的自定义输入模板进行一些验证，我们如何实现这一目标？请在下面找到重新编码的代码库。我希望将app.component.html的输入验证提供给＆＃39; app-custom-form-control＆＃39;自定义模板，并使用输入验证

父表单组件或应用程序组件

import {
    Component
}
from '@angular/core';
import {
    FormBuilder,
    FormGroup,
    FormControl,
    Validators,
    AbstractControl
}
from '@angular/forms';

 @ Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    form: FormGroup;
    constructor(public fb: FormBuilder) {
        this.form = this.fb.group({
                first: '',
                last: '',
                salary: ''

            })
    }
    customValidator(c: AbstractControl) {
        return c.get('password').value ===
        c.get('repassword').value
         ? null : {
            'nomatch': true
        }
    }
}

父HTML或应用程序模板HTML

<form [formGroup]="form">
    <input formControlName="first">
    <input formControlName="last">
    <app-custom-form-control formControlName="salary">
    </app-custom-form-control> 
</form>
{{ form.value | json}}
{{ form.status }}

自定义模板HTML - 自定义输入字段

<input type="text" #input (input)="onChange($event.target.value)" 
                   (blur)="onTouched()" [disabled]="disabled" >

<div class='error' *ngIf="controlDir && 
                      !controlDir.control.valid">
                  This fields is invalid

自定义组件

import {
    Component,
    OnInit,
    ViewChild,
    ElementRef,
    Self,
    Input
}
from '@angular/core';
import {
    ControlValueAccessor,
    NG_VALUE_ACCESSOR,
    NG_VALIDATORS,
    Validators,
    AbstractControl,
    NgControl
}
from '@angular/forms';
 @ Component({
    selector: 'app-custom-form-control',
    templateUrl: './custom-form-control.component.html',
    styleUrls: ['./custom-form-control.component.css'],

})
export class CustomFormControlComponent implements OnInit,
ControlValueAccessor {
     @ ViewChild('input')input: ElementRef
    onChange: (value: any) => void;
    onTouched: () => void;
    disabled: boolean;
    constructor( @ Self()public controlDir: NgControl) {
        controlDir.valueAccessor = this;
    }
    ngOnInit() {
        const control = this.controlDir.control;
        let validators = control.validator ? [control.validator,
                Validators.required] : Validators.required;
        control.setValidators(validators);
        control.updateValueAndValidity();
    }
    writeValue(value: any) { // model to view change reflect handler
        this.input.nativeElement.value = value;
    }

    registerOnChange(fn: (value: any) => void) {
        this.onChange = fn;
    }

    registerOnTouched(fn: () => void) {
        this.onTouched = fn;
    }

    // optional
    setDisabledState(disabled: boolean) {
        this.disabled = disabled;
    }

    // validate(ctrl: AbstractControl) {
    //   return Validators.required(ctrl);
    // }

}

代码结束

Answer 1

我在父表单上有setValidators，并通过控件验证程序从自定义元素访问它。

如何将验证作为自定义表单元素的输入

1 个答案: