import { Component , OnInit , Input } from '@angular/core' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { DocapiService , checkDocTemplateExistsValidator } from '../../docapi.service' ; import { CmdbMode } from '../../../framework/modes.enum' ; @ Component ( { selector : 'cmdb-docapi-settings-builder-settings-step' , templateUrl : './docapi-builder-settings-step.component.html' , styleUrls : [ './docapi-builder-settings-step.component.scss' ] } ) export class DocapiBuilderSettingsStepComponent implements OnInit { @ Input ( ) set preData ( data ) { if ( data !== undefined ) { this . settingsForm . patchValue ( data ) ; } } @ Input ( ) public mode : CmdbMode ; public modes = CmdbMode ; public settingsForm : FormGroup ; constructor ( private docapiService ) { this . settingsForm = new FormGroup ( { name : new FormControl ( '' , Validators . required ) , label : new FormControl ( '' , Validators . required ) , description : new FormControl ( '' ) , active : new FormControl ( true ) } ) ; } public get name ( ) { return this . settingsForm . get ( 'name' ) ; } public get label ( ) { return this . settingsForm . get ( 'label' ) ; } ngOnInit ( ) { if ( this . mode === CmdbMode . Create ) { this . settingsForm . get ( 'name' ) . setAsyncValidators ( checkDocTemplateExistsValidator ( this . docapiService ) ) ; this . settingsForm . get ( 'label' ) . valueChanges . subscribe ( value => { this . settingsForm . get ( 'name' ) . setValue ( value . replace ( / /g , '-' ) . toLowerCase ( ) ) ; const newValue = this . settingsForm . get ( 'name' ) . value ; this . settingsForm . get ( 'name' ) . setValue ( newValue . replace ( /[^a-z0-9 \-]/gi , '' ) . toLowerCase ( ) ) ; this . settingsForm . get ( 'name' ) . markAsDirty ( { onlySelf : true } ) ; this . settingsForm . get ( 'name' ) . markAsTouched ( { onlySelf : true } ) ; } ) ; } else if ( CmdbMode . Edit ) { this . settingsForm . markAllAsTouched ( ) ; } } }