Question

我有一个带验证的自定义表单控件。我在其中使用一个独立的FormControl来处理值和一些验证。

当控件从另一个FormGroup重置时，Angular有没有办法重置内部FormControl？

Bellow是我的自定义表单控件。我希望能够重置durationControl。

duration.component.ts

import { ChangeDetectionStrategy, Component, Input, OnInit, Optional, Self } from '@angular/core';
import { AbstractControl, ControlValueAccessor, FormControl, NgControl, ValidationErrors, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith, tap } from 'rxjs/operators';
import { Regex } from '../../constants';

@Component({
    selector: 'my-duration',
    templateUrl: 'duration.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DurationComponent implements ControlValueAccessor, OnInit {
    @Input() required: boolean;

    durations: string[] = [
        '15m',
        '30m',
        '45m',
        '1h',
        '1h 15m',
        '1h 30m',
        '1h 45m',
        '2h'
    ];
    filteredDurations: Observable<string[]>;

    durationControl = new FormControl('', [
        Validators.required,
        Validators.pattern(Regex.duration),
        DurationComponent.zeroDurationValidator
    ]);

    constructor(
        @Self()
        @Optional()
        public ngControl: NgControl
    ) {
        if (ngControl) {
            ngControl.valueAccessor = this;
        }
    }

    static zeroDurationValidator(control: AbstractControl): ValidationErrors {
        return control.value === '0m' ||
            control.value === '00m' ||
            control.value === '0h' ||
            control.value === '00h' ||
            control.value === '0h 0m' ||
            control.value === '0h 00m' ||
            control.value === '00h 00m' ||
            control.value === '00h 0m'
            ? { zeroDurationError: true }
            : null;
    }

    onChangeCallback = (value: string) => {};
    onTouchCallback = () => {};

    ngOnInit(): void {
        this.initializeFilters();
    }

    initializeFilters() {
        this.filteredDurations = this.durationControl.valueChanges.pipe(
            tap(value => this.onChangeCallback(value)),
            map(value => this.filterDurations(value))
        );
    }

    onBlur() {
        this.onTouchCallback();
    }

    registerOnChange(fn: any): void {
        this.onChangeCallback = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouchCallback = fn;
    }

    writeValue(obj: any): void {
        this.durationControl.setValue(obj, {
            emitModelToViewChange: true
        });
        this.onChangeCallback(obj);
    }

    private filterDurations(value: string) {
        return this.durations.filter(duration => duration.indexOf(value) === 0);
    }
}

duration.component.html

<mat-form-field>
    <input [formControl]="durationControl"
    type="text"
    matInput
    autocomplete="off"
    [placeholder]="'DURATION' | translate"
    [matAutocomplete]="durationAutocomplete"
    >
    <mat-error *ngIf="durationControl.hasError('required')">{{ 'FORM_VALIDATION.REQUIRED' | translate }}</mat-error>
    <mat-error *ngIf="durationControl.hasError('pattern')">{{ 'FORM_VALIDATION.INVALID_FORMAT' | translate }}</mat-error>
    <mat-error *ngIf="durationControl.hasError('zeroDurationError')">{{ 'FORM_VALIDATION.ZERO_DURATION_ERROR' | translate }}</mat-error>

    <mat-autocomplete #durationAutocomplete="matAutocomplete">
        <mat-option *ngFor="let duration of filteredDurations | async" [value]="duration">
            {{ duration }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Answer 1

重置窗体时，所有控件在writeValue方法中均收到null。然后，我可以像这样重设durationControl：

writeValue(obj: any): void {
    if (obj === null) {
        this.durationControl.reset();
    }

    this.durationControl.setValue(obj, {
        emitModelToViewChange: true
    });
    this.onChangeCallback(obj);
}

Answer 2

组件声明必须包含提供者 NG_VALUE_ACCESSOR。在您的特定组件中，外观如下：

@Component({
    selector: 'my-duration',
    templateUrl: 'duration.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => DurationComponent),
          multi: true
        }
      ]
})

如何使用Angular重置自定义表单控件

2 个答案: