fix: use native form instead of removed igc-form

IgniteUI · Oct 10, 2024 · 9508368 · 9508368
1 parent ab4de8d
commit 9508368
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 16 deletions.
diff --git a/...onents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts b/...onents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts
@@ -2,14 +2,12 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcFormComponent,
   IgcInputComponent,
   IgcCheckboxComponent,
   IgcButtonComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
-  IgcFormComponent,
   IgcInputComponent,
   IgcCheckboxComponent,
   IgcButtonComponent,
@@ -49,7 +47,7 @@ export default class $(ClassName) extends LitElement {
   render() {
     return html`
       <div class="container sample">
-        <igc-form id="form" @igcSubmit="${this.handleSubmit}">
+        <form id="form" @submit="${this.handleSubmit}">
           <div>Subscribe</div>
           <igc-input required name="name" type="text" label="Your Name"></igc-input>
           <igc-input required name="email" type="email" label="Your E-mail"></igc-input>
@@ -59,7 +57,7 @@ export default class $(ClassName) extends LitElement {
             <igc-button type="reset">Reset</igc-button>
             <igc-button type="submit">Submit</igc-button>
           </div>
-        </igc-form>
+        </form>
       </div>
     `;
   }

diff --git a/...templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts b/...templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 import $(ClassName) from './$(path).js';
 
-describe('IgcFormComponent', () => {
+describe('Form', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {
     const element = document.createElement('app-$(path)');
     expect(element).to.be.instanceOf($(ClassName));

diff --git a/.../cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts b/.../cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts
@@ -2,12 +2,10 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcFormComponent,
   IgcRadioGroupComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
-  IgcFormComponent,
   IgcRadioGroupComponent,
 );
 
@@ -23,19 +21,17 @@ export default class $(ClassName) extends LitElement {
 
   render() {
     return html`
-      <igc-form id="form" novalidate="true">
-        <label for="full-name">Full name:</label>
-        <input type="text" id="full-name" name="full-name" value="Your name" />
-        <label for="phone-number">Phone number:</label>
-        <input type="tel" id="phone-number" name="phone-number" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
+      <form id="form">
+        <igc-input label="Full name" type="text" id="full-name" name="full-name"></igc-input>
+        <igc-input label="Phone number" type="tel" id="phone-number" name="phone-number" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"></igc-input>
         <div>
-          <label for="gender">Gender:</label>
-          <igc-radio-group id="gender">
+        <label for="gender">Gender:</label>
+        <igc-radio-group id="gender">
             <igc-radio name="gender" value="Male">Male</igc-radio>
             <igc-radio name="gender" value="Female">Female</igc-radio>
           </igc-radio-group>
         </div>
-      </igc-form>
+      </form>
     `;
   }
 }
diff --git a/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts
@@ -9,7 +9,7 @@ class IgcFormTemplate extends IgniteUIForWebComponentsTemplate {
 		this.id = "form";
 		this.projectType = "igc-ts";
 		this.name = "Form";
-		this.description = "basic IgcForm";
+		this.description = "basic Form";
 	}
 }
 module.exports = new IgcFormTemplate();