I have a custom form control with validation. I use a standalone FormControl inside it to handle the value and some validation.
Is there a way with Angular to reset the inside FormControl when the control is being resetting from another FormGroup?
Bellow is my custom form control. I want to be able to reset the 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>
When resetting the form, all controls receive null in the writeValue method. I can then reset the durationControl like that:
writeValue(obj: any): void {
if (obj === null) {
this.durationControl.reset();
}
this.durationControl.setValue(obj, {
emitModelToViewChange: true
});
this.onChangeCallback(obj);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With