radius.component.ts

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { FormControl } from '@angular/forms';

import { rangeValidator } from 'src/app/shared/validator';
import { ConeSearch } from "../../../store/model";

@Component({
    selector: 'app-radius',
    templateUrl: 'radius.component.html',
    styleUrls: ['radius.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class RadiusComponent {
    @Input()
    set coneSearch(coneSearch: ConeSearch) {
        if (coneSearch) {
            this.radiusField.setValue(coneSearch.radius);
            this.radiusRange.setValue(coneSearch.radius);
            this.radiusField.disable();
            this.radiusRange.disable();
        } else {
            this.radiusRange.setValue(0);
            this.radiusField.setValue(0);
            this.radiusField.enable();
            this.radiusRange.enable();
        }
    }
    @Output() changeRadius: EventEmitter<number> = new EventEmitter();

    radiusRange = new FormControl('');
    radiusField = new FormControl('', [rangeValidator(0, 150, 'Radius')]);

    radiusChange(value: string): void {
        this.radiusField.setValue(+value);
        this.radiusRange.setValue(+value);
        if (this.radiusField.valid) {
            this.changeRadius.emit(+value);
        } else {
            this.changeRadius.emit(null);
        }
    }
}