fix(kendo): add name attr to radio type (#1807)

fix #1805
ngx-formly · Sep 27, 2019 · 10348bf · 10348bf
1 parent a96c8fe
commit 10348bf
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git a/src/bootstrap/src/lib/types/radio.ts b/src/bootstrap/src/lib/types/radio.ts
@@ -12,7 +12,7 @@ import { FieldType } from '@ngx-formly/core';
           [id]="id + '_' + i"
           [class.form-check-input]="to.formCheck !== 'custom'"
           [class.custom-control-input]="to.formCheck === 'custom'"
-          [name]="id"
+          [name]="field.name || id"
           [class.is-invalid]="showError"
           [attr.value]="option.value"
           [value]="option.value"

diff --git a/src/core/src/lib/components/formly.attributes.ts b/src/core/src/lib/components/formly.attributes.ts
@@ -6,9 +6,6 @@ import { DOCUMENT } from '@angular/common';
 @Directive({
   selector: '[formlyAttributes]',
   host: {
-    '[attr.name]': 'field.name',
-    '[attr.step]': 'to.step',
-
     '(focus)': 'onFocus($event)',
     '(blur)': 'onBlur($event)',
     '(keyup)': 'to.keyup && to.keyup(field, $event)',
@@ -29,6 +26,7 @@ export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
     'placeholder',
     'readonly',
     'disabled',
+    'step',
   ];
 
   get to(): FormlyTemplateOptions { return this.field.templateOptions || {}; }
@@ -45,11 +43,14 @@ export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.field) {
-      this.renderer.setAttribute(this.elementRef.nativeElement, 'id', this.field.id);
+      ['id', 'name'].forEach(attr => {
+        this.field[attr] && this.setAttribute(attr, this.field[attr]);
+      });
+
       if (this.to && this.to.attributes) {
         wrapProperty(this.to, 'attributes', (newVal, oldValue) => {
           if (oldValue) {
-            Object.keys(oldValue).forEach(attr => this.renderer.removeAttribute(this.elementRef.nativeElement, attr));
+            Object.keys(oldValue).forEach(attr => this.removeAttribute(attr));
           }
 
           if (newVal) {
@@ -88,7 +89,7 @@ export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
         if (value || value === 0) {
           this.setAttribute(attr, value === true ? attr : `${value}`);
         } else {
-          this.renderer.removeAttribute(this.elementRef.nativeElement, attr);
+          this.removeAttribute(attr);
         }
       }
     });
@@ -162,4 +163,8 @@ export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
   private setAttribute(attr: string, value: string) {
     this.renderer.setAttribute(this.elementRef.nativeElement, attr, value);
   }
+
+  private removeAttribute(attr: string) {
+    this.renderer.removeAttribute(this.elementRef.nativeElement, attr);
+  }
 }
diff --git a/src/ionic/src/lib/formly.attributes.ts b/src/ionic/src/lib/formly.attributes.ts
@@ -5,8 +5,6 @@ import { FormlyAttributes, FormlyFieldConfig } from '@ngx-formly/core';
   // tslint:disable-next-line
   selector: '[ionFormlyAttributes]',
   host: {
-    '[attr.name]': 'field.name',
-    '[attr.step]': 'to.step',
     '(keyup)': 'to.keyup && to.keyup(field, $event)',
     '(keydown)': 'to.keydown && to.keydown(field, $event)',
     '(click)': 'to.click && to.click(field, $event)',

diff --git a/src/kendo/src/lib/types/radio.ts b/src/kendo/src/lib/types/radio.ts
@@ -8,6 +8,7 @@ import { FieldType } from '@ngx-formly/core';
       <input
         type="radio"
         [id]="id + '_' + i"
+        [name]="field.name || id"
         [value]="option.value"
         [formControl]="formControl"
         [formlyAttributes]="field" class="k-radio" />

diff --git a/src/primeng/src/lib/types/radio.ts b/src/primeng/src/lib/types/radio.ts
@@ -6,7 +6,7 @@ import { FieldType } from '@ngx-formly/core';
   template: `
     <p-radioButton *ngFor="let option of to.options | formlySelectOptions:field | async"
       [class.ng-dirty]="showError"
-      [name]="id"
+      [name]="field.name || id"
       [formControl]="formControl"
       [label]="option.label"
       [value]="option.value">