fixed dynamic disabled component after angular 10 upgrade

src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.html

@@ -1,13 +1,15 @@
 <div>
     <div class="form-row align-items-center">
         <div class="col">
-            <input class="form-control"
-                   [class.is-invalid]="showErrorMessages"
-                   [value]="modelValuesString"
-                   [disabled]="model.disabled"
-                   [type]="model.inputType"
-                   [placeholder]="model.placeholder | translate"
-                   [readonly]="model.readOnly">
+          <input class="form-control"
+                 [class.is-invalid]="showErrorMessages"
+                 [id]="id"
+                 [name]="model.name"
+                 [value]="modelValuesString"
+                 [disabled]="model.disabled"
+                 [type]="model.inputType"
+                 [placeholder]="model.placeholder | translate"
+                 [readonly]="model.readOnly">
         </div>
     </div>
 </div>

src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.spec.ts

@@ -1,11 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
-import { DsDynamicDisabledComponent } from './dynamic-disabled.component';
-import { FormsModule } from '@angular/forms';
-import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
-import { DynamicDisabledModel } from './dynamic-disabled.model';
+import { FormControl, FormGroup, FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+
 import { TranslateModule } from '@ngx-translate/core';
+import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
+
+import { DsDynamicDisabledComponent } from './dynamic-disabled.component';
+import { DynamicDisabledModel } from './dynamic-disabled.model';
+import {
+  mockDynamicFormLayoutService,
+  mockDynamicFormValidationService
+} from '../../../../../testing/dynamic-form-mock-services';
 
 describe('DsDynamicDisabledComponent', () => {
   let comp: DsDynamicDisabledComponent;
@@ -13,25 +19,31 @@ describe('DsDynamicDisabledComponent', () => {
   let de: DebugElement;
   let el: HTMLElement;
   let model;
+  let group;
 
   function init() {
-    model = new DynamicDisabledModel({ value: 'test', repeatable: false, metadataFields: [], submissionId: '1234', id: '1', hasSelectableMetadata: false });
+    model = new DynamicDisabledModel({
+      value: 'test',
+      repeatable: false,
+      metadataFields: [],
+      submissionId: '1234',
+      id: 'disabledInput',
+      name: 'disabledInput',
+      hasSelectableMetadata: false
+    });
+    group = new FormGroup({
+      disabledInput: new FormControl(),
+    });
   }
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
       declarations: [DsDynamicDisabledComponent],
       imports: [FormsModule, TranslateModule.forRoot()],
       providers: [
-        {
-          provide: DynamicFormLayoutService,
-          useValue: {}
-        },
-        {
-          provide: DynamicFormValidationService,
-          useValue: {}
-        }
+        { provide: DynamicFormLayoutService, useValue: mockDynamicFormLayoutService },
+        { provide: DynamicFormValidationService, useValue: mockDynamicFormValidationService },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -43,6 +55,7 @@ describe('DsDynamicDisabledComponent', () => {
     de = fixture.debugElement;
     el = de.nativeElement;
     comp.model = model;
+    comp.group = group;
     fixture.detectChanges();
   });
 

src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.ts

@@ -1,7 +1,8 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 
 import { DynamicFormControlComponent, DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
-import { FormGroup } from '@angular/forms';
+
 import { DynamicDisabledModel } from './dynamic-disabled.model';
 
 /**