NAS-113116: Refactor ServiceWebdavComponent to use ix forms

src/app/pages/common/ix-forms/components/ix-input/ix-input.component.html

@@ -13,16 +13,30 @@
   <input
     matInput
     [class.prefix-padding]="prefixIcon"
+    [class.security-disc]="isSecurity()"
     [required]="required"
     [disabled]="isDisabled"
-    [type]="type"
+    type="getType()"
     [(ngModel)]="value"
     (ngModelChange)="onChange($event)"
     (blur)="onTouch()"
+    [autocomplete]="autocomplete"
+    [autocapitalize]="autocapitalize"
   >
   <span *ngIf="shouldShowResetInput()" class="reset-input">
     <mat-icon (click)="resetInput()" role="img" fontSet="mdi-set" fontIcon="mdi-close-circle"></mat-icon>
   </span>
+  <button
+    *ngIf="shouldShowToggle()"
+    mat-icon-button type="button"
+    class="toggle_pw"
+    (click)="togglePW()"
+    ix-auto
+    ix-auto-type="button"
+    ix-auto-identifier="{{label}}_toggle-pw">
+    <i class="material-icons" matTooltip="Hide" *ngIf="showPassword">visibility</i>
+    <i class="material-icons" matTooltip="Show" *ngIf="!showPassword">visibility_off</i>
+  </button>
 </div>
 <ix-form-errors [control]="controlDirective.control" [label]="label"></ix-form-errors>
 <mat-hint *ngIf="hint">{{hint}}</mat-hint>

src/app/pages/common/ix-forms/components/ix-input/ix-input.component.scss

@@ -76,3 +76,14 @@
   max-width: 16px;
   width: auto;
 }
+
+.input-container .mat-icon-button {
+  height: 24px;
+  line-height: 24px;
+  opacity: 0.5;
+  width: 24px;
+}
+
+.security-disc {
+  -webkit-text-security: disc;
+}

src/app/pages/common/ix-forms/components/ix-input/ix-input.component.ts

@@ -19,9 +19,13 @@ export class IxInputComponent implements ControlValueAccessor {
   @Input() tooltip: string;
   @Input() required: boolean;
   @Input() type: string;
+  @Input() togglePw: boolean;
+  @Input() autocomplete = 'off';
+  @Input() autocapitalize = 'off';
 
   value = '';
   isDisabled = false;
+  showPassword = false;
 
   onChange: (value: string | number) => void = (): void => {};
   onTouch: () => void = (): void => {};
@@ -46,8 +50,20 @@ export class IxInputComponent implements ControlValueAccessor {
     this.onTouch = onTouched;
   }
 
+  shouldShowToggle(): boolean {
+    return this.type === 'password' && this.togglePw;
+  }
+
   shouldShowResetInput(): boolean {
-    return !this.isDisabled && this.hasValue();
+    return !this.isDisabled && this.hasValue() && !this.shouldShowToggle();
+  }
+
+  getType(): string {
+    return this.type === 'password' ? 'text' : this.type;
+  }
+
+  isSecurity(): boolean {
+    return this.type === 'password' && !this.showPassword;
   }
 
   hasValue(): boolean {
@@ -63,4 +79,8 @@ export class IxInputComponent implements ControlValueAccessor {
     this.isDisabled = isDisabled;
     this.cdr.markForCheck();
   }
+
+  togglePW(): void {
+    this.showPassword = !this.showPassword;
+  }
 }

src/app/pages/services/components/service-webdav/service-webdav.component.html

+<mat-card class="form-card">
+  <mat-card-content>
+    <form [formGroup]="form" class="ix-form-container" (submit)="onSubmit()">
+      <ix-fieldset [title]="helptext.fieldset_title">
+        <ix-select
+          [formControlName]="protocol.fcName"
+          [label]="protocol.label"
+          [tooltip]="protocol.tooltip"
+          [options]="protocol.options"
+          (ngModelChange)="onChangeProtocal($event)"
+        ></ix-select>
+        <ix-input
+          *ngIf="!tcpport.hidden"
+          [formControlName]="tcpport.fcName"
+          [label]="tcpport.label"
+          [tooltip]="tcpport.tooltip"
+        ></ix-input>
+        <ix-input
+          *ngIf="!tcpportssl.hidden"
+          [formControlName]="tcpportssl.fcName"
+          [label]="tcpportssl.label"
+          [tooltip]="tcpportssl.tooltip"
+        ></ix-input>
+        <ix-select
+          *ngIf="!certssl.hidden"
+          [formControlName]="certssl.fcName"
+          [label]="certssl.label"
+          [tooltip]="certssl.tooltip"
+          [options]="certssl.options"
+        ></ix-select>
+        <ix-select
+          [formControlName]="htauth.fcName"
+          [label]="htauth.label"
+          [tooltip]="htauth.tooltip"
+          [options]="htauth.options"
+          (ngModelChange)="onChangeHtAuth($event)"
+        ></ix-select>
+        <ix-input
+          *ngIf="pwdRequired"
+          [formControlName]="password.fcName"
+          [label]="password.label"
+          [tooltip]="password.tooltip"
+          type="password"
+          [togglePw]="true"
+        ></ix-input>
+        <ix-input
+          *ngIf="pwdRequired"
+          [formControlName]="password2.fcName"
+          [label]="password2.label"
+          type="password"
+        ></ix-input>
+      </ix-fieldset>
+
+      <div class="form-actions">
+        <button
+          mat-button
+          type="submit"
+          [disabled]="form.invalid || isFormLoading"
+          color="primary"
+        >{{ 'Save' }}</button>
+        <button
+          mat-button
+          color="accent"
+          class="ml-05"
+          (click)="cancel()"
+        >{{ 'Cancel' }}</button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
\ No newline at end of file

src/app/pages/services/components/service-webdav/service-webdav.component.scss

+.form-actions {
+  margin: 8px 10px;
+}

src/app/pages/services/components/service-webdav/service-webdav.component.spec.ts

+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { Observable, of } from 'rxjs';
+import { mockCall, mockWebsocket } from 'app/core/testing/utils/mock-websocket.utils';
+import { Certificate } from 'app/interfaces/certificate.interface';
+import { WebdavConfig } from 'app/interfaces/webdav-config.interface';
+import { IxFormsModule } from 'app/pages/common/ix-forms/ix-forms.module';
+import { FormErrorHandlerService } from 'app/pages/common/ix-forms/services/form-error-handler.service';
+import { IxFormHarness } from 'app/pages/common/ix-forms/testing/ix-form.harness';
+import { ServiceWebdavComponent } from 'app/pages/services/components/service-webdav/service-webdav.component';
+import {
+  AppLoaderService, DialogService, SystemGeneralService, WebSocketService,
+} from 'app/services';
+
+describe('ServiceWebdavComponent', () => {
+  let spectator: Spectator<ServiceWebdavComponent>;
+  let loader: HarnessLoader;
+  let ws: WebSocketService;
+  const createComponent = createComponentFactory({
+    component: ServiceWebdavComponent,
+    imports: [
+      IxFormsModule,
+      ReactiveFormsModule,
+    ],
+    providers: [
+      mockWebsocket([
+        mockCall('webdav.config', {
+          protocol: 'HTTPHTTPS',
+          tcpport: 8080,
+          tcpportssl: 8081,
+          certssl: 1,
+          htauth: 'BASIC',
+          password: 'pleasechange',
+          id: 1,
+        } as WebdavConfig),
+        mockCall('kerberos.update'),
+      ]),
+      mockProvider(FormErrorHandlerService),
+      mockProvider(SystemGeneralService, {
+        getCertificates(): Observable<Certificate[]> {
+          return of([
+            {
+              CA_type_existing: false,
+              CA_type_intermediate: false,
+              CA_type_internal: false,
+              CSR: null,
+              DN: '/C=US/O=iXsystems/CN=localhost/emailAddress=info@ixsystems.com/ST=Tennessee/L=Maryville/subjectAltName=DNS:localhost',
+              can_be_revoked: false,
+              cert_type: 'CERTIFICATE',
+              cert_type_CSR: false,
+              cert_type_existing: true,
+              cert_type_internal: false,
+              certificate: '-----BEGIN CERTIFICATE-----\nMIID....XlGxqmLs\n-----END CERTIFICATE-----\n',
+              certificate_path: '/etc/certificates/freenas_default.crt',
+              chain: false,
+              chain_list: ['-----BEGIN CERTIFICATE-----\nMIIDrTCCApWgAwIBAgIECg…DoVkBf/Sh1NB2cXlGxqmLs\n-----END CERTIFICATE-----\n'],
+              city: 'Maryville',
+              common: 'localhost',
+              country: 'US',
+              csr_path: '/etc/certificates/freenas_default.csr',
+              digest_algorithm: 'SHA256',
+              email: 'info@ixsystems.com',
+              extensions: { SubjectAltName: 'DNS:localhost', ExtendedKeyUsage: 'TLS Web Server Authentication' },
+              fingerprint: '88:0D:D0:12:BC:47:47:96:05:6A:8E:B8:C3:86:E5:6B:5B:E8:E9:1C',
+              from: 'Fri Oct 29 14:11:19 2021',
+              id: 1,
+              internal: 'NO',
+              issuer: 'external',
+              key_length: 2048,
+              key_type: 'RSA',
+              lifetime: 397,
+              name: 'freenas_default',
+              organization: 'iXsystems',
+              organizational_unit: null,
+              parsed: true,
+              privatekey: '-----BEGIN PRIVATE KEY-----\nMIIE....URCL/n\nH9Vn5+0sIJoZ5pZMg/H9RMWdYg==\n-----END PRIVATE KEY-----\n',
+              privatekey_path: '/etc/certificates/freenas_default.key',
+              revoked: false,
+              revoked_date: null,
+              root_path: '/etc/certificates',
+              san: ['DNS:localhost'],
+              serial: 168294129,
+              signedby: null,
+              state: 'Tennessee',
+              subject_name_hash: 3193428416,
+              type: 8,
+              until: 'Wed Nov 30 13:11:19 2022',
+            },
+          ]);
+        },
+      }),
+      mockProvider(AppLoaderService),
+      mockProvider(DialogService),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+    ws = spectator.inject(WebSocketService);
+  });
+
+  it('loads current webdav config and show them', async () => {
+    const form = await loader.getHarness(IxFormHarness);
+    const values = await form.getValues();
+
+    expect(ws.call).toHaveBeenCalledWith('webdav.config');
+    expect(values).toEqual({
+      Protocol: 'HTTP+HTTPS',
+      'HTTP Port': '8080',
+      'HTTPS Port': '8081',
+      'Webdav SSL Certificate': 'freenas_default',
+      'HTTP Authentication': 'Basic Authentication',
+      'Webdav Password': 'pleasechange',
+      'Confirm Password': '',
+    });
+  });
+
+  it('sends an update payload to websocket when settings are updated and saved', async () => {
+    const form = await loader.getHarness(IxFormHarness);
+    await form.fillForm({
+      Protocol: 'HTTP+HTTPS',
+      'HTTP Port': '8000',
+      'HTTPS Port': '8001',
+      'Webdav SSL Certificate': 'freenas_default',
+      'HTTP Authentication': 'Digest Authentication',
+      'Webdav Password': 'oh, got it',
+      'Confirm Password': 'oh, got it',
+    });
+
+    const saveButton = await loader.getHarness(MatButtonHarness.with({ text: 'Save' }));
+    await saveButton.click();
+
+    expect(ws.call).toHaveBeenCalledWith('webdav.update', [{
+      protocol: 'HTTPHTTPS',
+      tcpport: '8000',
+      tcpportssl: '8001',
+      certssl: 1,
+      htauth: 'DIGEST',
+      password: 'oh, got it',
+    }]);
+  });
+});

src/app/pages/services/components/service-webdav/service-webdav.component.ts

 import {
-  ApplicationRef, Component, Injector,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef, Component, OnInit,
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import {
+  Validators,
+} from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import * as _ from 'lodash';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
 import helptext from 'app/helptext/services/components/service-webdav';
-import { FormConfiguration } from 'app/interfaces/entity-form.interface';
+import { Option } from 'app/interfaces/option.interface';
 import { WebdavConfig, WebdavConfigUpdate } from 'app/interfaces/webdav-config.interface';
-import { EntityFormComponent } from 'app/pages/common/entity/entity-form/entity-form.component';
-import { FieldConfig, FormSelectConfig } from 'app/pages/common/entity/entity-form/models/field-config.interface';
-import { FieldSet } from 'app/pages/common/entity/entity-form/models/fieldset.interface';
-import { SystemGeneralService, WebSocketService, ValidationService } from 'app/services';
+import { EntityUtils } from 'app/pages/common/entity/utils';
+import { FormErrorHandlerService } from 'app/pages/common/ix-forms/services/form-error-handler.service';
+import {
+  SystemGeneralService, WebSocketService, ValidationService, DialogService, AppLoaderService,
+} from 'app/services';
 
 @UntilDestroy()
 @Component({
   selector: 'webdav-edit',
-  template: '<entity-form [conf]="this"></entity-form>',
-  providers: [SystemGeneralService],
+  templateUrl: './service-webdav.component.html',
+  styleUrls: ['./service-webdav.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ServiceWebdavComponent implements FormConfiguration {
-  queryCall = 'webdav.config' as const;
-  editCall = 'webdav.update' as const;
-  route_success: string[] = ['services'];
-  title = helptext.formTitle;
-
-  fieldConfig: FieldConfig[] = [];
-  fieldSets: FieldSet[] = [
-    {
-      name: helptext.fieldset_title,
-      width: '100%',
-      label: true,
-      config: [
-        {
-          type: 'select',
-          name: 'protocol',
-          placeholder: helptext.protocol_placeholder,
-          tooltip: helptext.protocol_tooltip,
-          options: helptext.protocol_options,
-        },
-        {
-          type: 'input',
-          name: 'tcpport',
-          placeholder: helptext.tcpport_placeholder,
-          tooltip: helptext.tcpport_tooltip,
-        },
-        {
-          type: 'input',
-          name: 'tcpportssl',
-          placeholder: helptext.tcpportssl_placeholder,
-          tooltip: helptext.tcpportssl_tooltip,
-        },
-        {
-          type: 'select',
-          name: 'certssl',
-          placeholder: helptext.certssl_placeholder,
-          tooltip: helptext.certssl_tooltip,
-          options: [{ label: '---', value: null }],
-        },
-        {
-          type: 'select',
-          name: 'htauth',
-          placeholder: helptext.htauth_placeholder,
-          tooltip: helptext.htauth_tooltip,
-          options: helptext.htauth_options,
-        },
-        {
-          type: 'input',
-          name: 'password',
-          placeholder: helptext.password_placeholder,
-          togglePw: true,
-          tooltip: helptext.password_tooltip,
-          inputType: 'password',
-        },
-        {
-          type: 'input',
-          name: 'password2',
-          placeholder: helptext.password2_placeholder,
-          inputType: 'password',
-          validation: this.validationService.matchOtherValidator('password'),
-        },
-      ],
-    }];
-
-  private webdav_protocol: FormControl;
-  private webdav_tcpport: FieldConfig;
-  private webdav_tcpportssl: FieldConfig;
-  private webdav_certssl: FormSelectConfig;
-  private webdav_htauth: FormControl;
-  private webdav_password: FieldConfig;
-  private webdav_password2: FieldConfig;
-  private entityForm: EntityFormComponent;
+export class ServiceWebdavComponent implements OnInit {
+  isFormLoading = false;
+
+  form = this.fb.group({
+    protocol: [''],
+    tcpport: [null as number, [Validators.min(1), Validators.max(65535)]],
+    tcpportssl: [null as number, [Validators.min(1), Validators.max(65535)]],
+    certssl: [null as any],
+    htauth: [''],
+    password: [''],
+    password2: ['', [this.validationService.matchOtherValidator('password')]],
+  });
+
+  readonly helptext = helptext;
+
+  protocol: {
+    readonly fcName: 'protocol';
+    label: string;
+    tooltip: string;
+    options: Observable<Option[]>;
+  } = {
+    fcName: 'protocol',
+    label: helptext.protocol_placeholder,
+    tooltip: helptext.protocol_tooltip,
+    options: of(helptext.protocol_options),
+  };
+
+  tcpport: {
+    readonly fcName: 'tcpport';
+    label: string;
+    tooltip: string;
+    hidden: boolean;
+  } = {
+    fcName: 'tcpport',
+    label: helptext.tcpport_placeholder,
+    tooltip: helptext.tcpport_tooltip,
+    hidden: false,
+  };
+
+  tcpportssl: {
+    readonly fcName: 'tcpportssl';
+    label: string;
+    tooltip: string;
+    hidden: boolean;
+  } = {
+    fcName: 'tcpportssl',
+    label: helptext.tcpportssl_placeholder,
+    tooltip: helptext.tcpportssl_tooltip,
+    hidden: false,
+  };
+
+  certssl: {
+    readonly fcName: 'certssl';
+    label: string;
+    tooltip: string;
+    options: Observable<Option[]>;
+    hidden: boolean;
+  } = {
+    fcName: 'certssl',
+    label: helptext.certssl_placeholder,
+    tooltip: helptext.certssl_tooltip,
+    options: this.systemGeneralService.getCertificates().pipe(
+      map((certificates) => {
+        const options = certificates.map((certificate) => ({
+          label: certificate.name,
+          value: certificate.id,
+        }));
+
+        return [
+          { label: '---', value: null },
+          ...options,
+        ];
+      }),
+    ),
+    hidden: false,
+  };
+
+  htauth: {
+    readonly fcName: 'htauth';
+    label: string;
+    tooltip: string;
+    options: Observable<Option[]>;
+  } = {
+    fcName: 'htauth',
+    label: helptext.htauth_placeholder,
+    tooltip: helptext.htauth_tooltip,
+    options: of(helptext.htauth_options),
+  };
+
+  password: {
+    readonly fcName: 'password';
+    label: string;
+    tooltip: string;
+  } = {
+    fcName: 'password',
+    label: helptext.password_placeholder,
+    tooltip: helptext.password_tooltip,
+  };
+
+  password2: {
+    readonly fcName: 'password2';
+    label: string;
+  } = {
+    fcName: 'password2',
+    label: helptext.password2_placeholder,
+  };
+
+  pwdRequired = true;
 
   constructor(
+    private fb: FormBuilder,
     protected router: Router,
     protected route: ActivatedRoute,
     protected ws: WebSocketService,
-    protected _injector: Injector,
-    protected _appRef: ApplicationRef,
     protected systemGeneralService: SystemGeneralService,
     protected validationService: ValidationService,
+    private cdr: ChangeDetectorRef,
+    private dialogService: DialogService,
+    private loader: AppLoaderService,
+    private errorHandler: FormErrorHandlerService,
   ) {}
 
-  resourceTransformIncomingRestData(data: WebdavConfig): any {
-    const transformed = { ...data };
-    const certificate = data['certssl'];
-    if (certificate && certificate.id) {
-      transformed['certssl'] = certificate.id;
-    }
-    delete transformed['password'];
-    return transformed;
-  }
+  ngOnInit(): void {
+    this.isFormLoading = true;
+    this.loader.open();
 
-  afterInit(entityForm: EntityFormComponent): void {
-    this.entityForm = entityForm;
-    this.entityForm.submitFunction = this.submitFunction;
-    this.webdav_tcpport = _.find(this.fieldConfig, { name: 'tcpport' });
-    this.webdav_tcpportssl = _.find(this.fieldConfig, { name: 'tcpportssl' });
-    this.webdav_password = _.find(this.fieldConfig, { name: 'password' });
-    this.webdav_password2 = _.find(this.fieldConfig, { name: 'password2' });
-    this.webdav_htauth = entityForm.formGroup.controls['htauth'] as FormControl;
-    this.webdav_protocol = entityForm.formGroup.controls['protocol'] as FormControl;
-    this.handleProtocol(this.webdav_protocol.value);
-    this.handleAuth(this.webdav_htauth.value);
-    this.webdav_protocol.valueChanges
-      .pipe(untilDestroyed(this))
-      .subscribe((value: string) => {
-        this.handleProtocol(value);
-      });
-    this.webdav_htauth.valueChanges
-      .pipe(untilDestroyed(this))
-      .subscribe((value: string) => {
-        this.handleAuth(value);
-      });
-
-    this.webdav_certssl = _.find(this.fieldConfig, { name: 'certssl' }) as FormSelectConfig;
-    this.systemGeneralService.getCertificates().pipe(untilDestroyed(this)).subscribe((res) => {
-      if (res.length > 0) {
-        res.forEach((item) => {
-          this.webdav_certssl.options.push(
-            { label: item.name, value: item.id },
-          );
-        });
-      }
-    });
+    this.ws.call('webdav.config').pipe(untilDestroyed(this)).subscribe(
+      (config: WebdavConfig) => {
+        this.form.patchValue(config);
+        this.isFormLoading = false;
+        this.loader.close();
+        this.cdr.markForCheck();
+      },
+      (error) => {
+        this.isFormLoading = false;
+        this.loader.close();
+        new EntityUtils().handleWSError(null, error, this.dialogService);
+      },
+    );
   }
 
-  handleProtocol(value: string): void {
-    if (value === 'HTTP') {
-      this.webdav_tcpport['isHidden'] = false;
-      this.webdav_tcpportssl['isHidden'] = true;
-      this.webdav_certssl['isHidden'] = true;
-    } else if (value === 'HTTPS') {
-      this.webdav_tcpport['isHidden'] = true;
-      this.webdav_tcpportssl['isHidden'] = false;
-      this.webdav_certssl['isHidden'] = false;
-    } else if (value === 'HTTPHTTPS') {
-      this.webdav_tcpport['isHidden'] = false;
-      this.webdav_tcpportssl['isHidden'] = false;
-      this.webdav_certssl['isHidden'] = false;
+  onChangeProtocal(value: string): void {
+    switch (value) {
+      case 'HTTP':
+        this.tcpport.hidden = false;
+        this.tcpportssl.hidden = true;
+        this.certssl.hidden = true;
+        break;
+      case 'HTTPS':
+        this.tcpport.hidden = true;
+        this.tcpportssl.hidden = false;
+        this.certssl.hidden = false;
+        break;
+      case 'HTTPHTTPS':
+        this.tcpport.hidden = false;
+        this.tcpportssl.hidden = false;
+        this.certssl.hidden = false;
+        break;
+      default:
+        break;
     }
   }
 
-  handleAuth(value: string): void {
+  onChangeHtAuth(value: string): void {
     if (value === 'NONE') {
-      this.entityForm.setDisabled('password', true, true);
-      this.entityForm.setDisabled('password2', true, true);
+      this.form.controls.password.setValue('');
+      this.form.controls.password2.setValue('');
+      this.pwdRequired = false;
     } else {
-      this.entityForm.setDisabled('password', false, false);
-      this.entityForm.setDisabled('password2', false, false);
+      this.pwdRequired = true;
     }
   }
 
-  submitFunction(body: WebdavConfigUpdate & { password2?: string }): Observable<WebdavConfig> {
-    delete body['password2'];
-    return this.ws.call('webdav.update', [body]);
+  onSubmit(): void {
+    this.isFormLoading = true;
+    this.loader.open();
+
+    const values = this.form.value;
+    delete values.password2;
+    this.ws.call('webdav.update', [values] as [WebdavConfigUpdate]).pipe(untilDestroyed(this)).subscribe(() => {
+      this.isFormLoading = false;
+      this.loader.close();
+      this.router.navigate(['/', 'services']);
+    }, (error) => {
+      this.isFormLoading = false;
+      this.loader.close();
+      this.errorHandler.handleWsFormError(error, this.form);
+      this.cdr.markForCheck();
+    });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/', 'services']);
   }
 }

src/app/pages/services/services.module.ts

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { MaterialModule } from 'app/app-material.module';
 import { CommonDirectivesModule } from 'app/directives/common/common-directives.module';
+import { IxFormsModule } from 'app/pages/common/ix-forms/ix-forms.module';
 import { ServiceDDNSComponent } from 'app/pages/services/components/service-dynamicdns/service-dynamicdns.component';
 import { ServiceFTPComponent } from 'app/pages/services/components/service-ftp/service-ftp.component';
 import { ServiceLLDPComponent } from 'app/pages/services/components/service-lldp/service-lldp.component';
@@ -38,6 +39,8 @@ import { routing } from './services.routing';
     NgxDatatableModule,
     TranslateModule,
     CommonDirectivesModule,
+    IxFormsModule,
+    ReactiveFormsModule,
   ],
   declarations: [
     ServicesComponent,

src/assets/styles/other/_fn-styles.scss

@@ -189,6 +189,10 @@ samp {
   margin-left: 1rem !important;
 }
 
+.ml-05 {
+  margin-left: 0.5rem !important;
+}
+
 .mb-05 {
   margin-bottom: 0.5rem !important;
 }