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

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

贝娄是我的自定义表格控件.我希望能够重置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>