feat(stepper): Add support for linear stepper #2 - each step as its own form. #6117

g1shin · 2017-07-28T17:02:40Z

This is the PR shows the approach of considering each step as its own form to add support for linear stepper.
Alternative: #6116

(cell.ts and row.ts files were changed because there were lint errors regarding long lines.)

kara · 2017-07-28T17:16:41Z

src/cdk/stepper/stepper.ts

+  }
+  private _disabled = false;
+
+  /** Whether the user has interacted with step or not. */


Curious what interacted means specifically. Clicked on the step ? Add more to the comment?

kara · 2017-07-28T17:17:41Z

src/demo-app/stepper/stepper-demo.html

+<h2>Linear Vertical Stepper Demo</h2>
+<md-vertical-stepper>
+  <md-step>
+    <form [formGroup]="nameFormGroup" novalidate>


Remove novalidate? It's added automatically by the forms module. Same in forms below.

kara · 2017-07-28T17:18:42Z

src/demo-app/stepper/stepper-demo.html

+    </form>
+  </md-step>
+
+  <md-step [disabled]="!nameFormGroup.valid">


Probably more idiomatic to use nameFormGroup.invalid here.

g1shin · 2017-08-03T19:59:05Z

Changes made; ready for review.

jelbourn · 2017-08-04T00:07:51Z

src/cdk/stepper/stepper.ts

@@ -84,6 +96,10 @@ export class CdkStepper {
  @Input()
  get selectedIndex() { return this._selectedIndex; }
  set selectedIndex(index: number) {
+    this._steps.toArray()[this._selectedIndex].interacted = true;
+    for (let i = 0; i < index; i++) {


Add a comment here explaining why you return early if a preceding step is invalid

jelbourn · 2017-08-04T00:08:48Z

src/cdk/stepper/tsconfig-build.json

@@ -4,7 +4,8 @@
    "outDir": "../../../dist/packages/cdk",
    "baseUrl": ".",
    "paths": {
-      "@angular/cdk/keyboard": ["../../../dist/packages/cdk/keyboard/public_api"]
+      "@angular/cdk/keyboard": ["../../../dist/packages/cdk/keyboard/public_api"],
+      "@angular/cdk/coercion": ["../../../dist/packages/cdk/coercion/public_api"]


You should be able to remove the paths from this config completely now (the tooling will just work for anything now)

jelbourn · 2017-08-04T00:14:06Z

src/demo-app/stepper/stepper-demo.html

+    </form>
+  </md-step>
+
+  <md-step [valid]="phoneFormGroup.valid">


Have one step use the label property instead of mdStepLabel?

jelbourn · 2017-08-04T00:14:29Z

src/demo-app/stepper/stepper-demo.html

+  <md-step [valid]="phoneFormGroup.valid">
+    <form [formGroup]="phoneFormGroup">
+      <ng-template mdStepLabel>
+        <div>Fill out your phone number</div>


Need the div in here?

g1shin · 2017-08-08T22:14:17Z

This PR is now ready for review 👍

rafaelss95 · 2017-08-09T00:24:08Z

src/demo-app/stepper/stepper-demo.ts

+
+    this.phoneFormGroup = new FormGroup({
+      phoneCtrl: new FormControl('')
+    });


Why not simplify this? Something like:

ngOnInit() { this.nameFormGroup = new FormGroup({ firstNameCtrl: new FormControl('', Validators.required), lastNameCtrl: new FormControl('', Validators.required) }); this.phoneFormGroup = new FormGroup({ phoneCtrl: new FormControl('') }); // Also, maybe use FormBuilder (this._formBuilder.group and this._formBuilder.control) above? this.formGroup = this._formBuilder.group({ formArray: this._formBuilder.array([ this.nameFormGroup, this.phoneFormGroup ]) }); }

rafaelss95 · 2017-08-09T00:26:52Z

src/cdk/stepper/stepper.ts

@@ -191,7 +191,7 @@ export class CdkStepper {
    stepsArray[this._selectedIndex].interacted = true;
    if (this._linear) {
      for (let i = 0; i < index; i++) {
-        if (!stepsArray[i].stepControl.valid) {
+        if (stepsArray[i].stepControl.invalid) {
          return true;
        }


Can be replaced by

if (this._linear) { return stepsArray.some(step => step.stepControl.invalid); }

mmalerba · 2017-08-15T19:46:26Z

src/demo-app/stepper/stepper-demo.html

 <md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>
+
+<h3>Linear Vertical Stepper Demo using FormArray</h3>


... using a single form

mmalerba · 2017-08-15T19:46:43Z

src/demo-app/stepper/stepper-demo.html

@@ -42,7 +43,51 @@
  </md-vertical-stepper>
 </form>

-<h2>Vertical Stepper Demo</h2>
+<h3>Linear Horizontal Stepper Demo using multiple FormGroups</h3>


... using a different form for each step

mmalerba · 2017-08-15T19:47:51Z

src/demo-app/stepper/stepper-demo.html

+  <md-step [stepControl]="nameFormGroup">
+    <form [formGroup]="nameFormGroup">
+      <ng-template mdStepLabel>Fill out your name</ng-template>
+      <md-input-container>


change all md-input-container to md-form-field

mmalerba · 2017-08-15T19:49:34Z

src/demo-app/stepper/stepper-demo.ts

@@ -35,5 +38,14 @@ export class StepperDemo {
        })
      ])
    });
+
+    this.nameFormGroup = new FormGroup({


use form builder like above

g1shin · 2017-08-16T01:15:54Z

Ready for review again 😃

kara

LGTM, one nit.

kara · 2017-08-16T01:28:25Z

src/demo-app/stepper/stepper-demo.html

+    <form [formGroup]="phoneFormGroup">
+      <ng-template mdStepLabel>Fill out your phone number</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Phone number" formControlName="phoneCtrl">


Nit: This is the only required field without the required attribute.

mmalerba · 2017-08-16T15:52:52Z

LGTM, feel free to merge after addressing kara's nit

…wn form. (#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review

…s its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review

…wn form. (#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review

@input

…tepper branch. (#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (#6242) * Add initial styles to stepper based on Material guidelines * Fix flex-shrink and min-width * Changes made based on review * Fix alignment * Margin modifications feat(stepper): Add support for linear stepper (#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper #2 - each step as its own form. (#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (#6507) feat(stepper): Add documentation for stepper (#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs

@input

…tepper branch. (angular#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (angular#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (angular#6242) * Add initial styles to stepper based on Material guidelines * Fix flex-shrink and min-width * Changes made based on review * Fix alignment * Margin modifications feat(stepper): Add support for linear stepper (angular#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (angular#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (angular#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper angular#2 - each step as its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (angular#6507) feat(stepper): Add documentation for stepper (angular#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (angular#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (angular#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs

@input

…tepper branch. (angular#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (angular#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (angular#6242) * Add initial styles to stepper based on Material guidelines * Fix flex-shrink and min-width * Changes made based on review * Fix alignment * Margin modifications feat(stepper): Add support for linear stepper (angular#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (angular#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (angular#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper angular#2 - each step as its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (angular#6507) feat(stepper): Add documentation for stepper (angular#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (angular#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (angular#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs

angular-automatic-lock-bot · 2019-09-06T21:03:15Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

g1shin assigned jelbourn, kara, g1shin and mmalerba Jul 28, 2017

g1shin requested review from jelbourn, kara and mmalerba July 28, 2017 17:02

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jul 28, 2017

kara reviewed Jul 28, 2017

View reviewed changes

kara added the pr: needs review label Jul 28, 2017

kara removed their assignment Jul 28, 2017

mmalerba mentioned this pull request Jul 31, 2017

feat(select): add support for custom errorStateMatcher #6147

Closed

g1shin force-pushed the multiforms branch from 143928b to 6d002c7 Compare August 3, 2017 18:55

jelbourn reviewed Aug 4, 2017

View reviewed changes

g1shin force-pushed the multiforms branch from 660728f to b97271b Compare August 8, 2017 22:13

rafaelss95 reviewed Aug 9, 2017

View reviewed changes

g1shin force-pushed the stepper branch from 7cdbc40 to 2bdc6f3 Compare August 14, 2017 18:21

g1shin force-pushed the multiforms branch 2 times, most recently from e9a9b4b to 3f05ce2 Compare August 14, 2017 20:59

mmalerba changed the title ~~feat(stepper): Add support for linear stepper #2 - each form as its own form.~~ feat(stepper): Add support for linear stepper #2 - each step as its own form. Aug 15, 2017

mmalerba reviewed Aug 15, 2017

View reviewed changes

jwshinjwshin added 4 commits August 15, 2017 17:42

Add form control - consider each step as its own form group

4db843d

Comment edits

c33e00e

Add 'valid' to MdStep for form validation

00bbb23

Add [stepControl] to each step based on merging

127789b

g1shin force-pushed the multiforms branch from 3f05ce2 to 2d61f16 Compare August 16, 2017 01:15

kara approved these changes Aug 16, 2017

View reviewed changes

mmalerba added pr: lgtm and removed pr: needs review labels Aug 16, 2017

Changes based on review

28f4ceb

g1shin force-pushed the multiforms branch from 2d61f16 to 28f4ceb Compare August 16, 2017 18:49

g1shin merged commit 6ce8b9f into angular:stepper Aug 16, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(stepper): Add support for linear stepper #2 - each step as its own form. #6117

feat(stepper): Add support for linear stepper #2 - each step as its own form. #6117

g1shin commented Jul 28, 2017

kara Jul 28, 2017

kara Jul 28, 2017

kara Jul 28, 2017

g1shin commented Aug 3, 2017

jelbourn Aug 4, 2017

jelbourn Aug 4, 2017

jelbourn Aug 4, 2017

jelbourn Aug 4, 2017

g1shin commented Aug 8, 2017

rafaelss95 Aug 9, 2017 •

edited by jelbourn

Loading

rafaelss95 Aug 9, 2017

mmalerba Aug 15, 2017

mmalerba Aug 15, 2017

mmalerba Aug 15, 2017

mmalerba Aug 15, 2017

g1shin commented Aug 16, 2017

kara left a comment

kara Aug 16, 2017

mmalerba commented Aug 16, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

		<md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>

		<h3>Linear Vertical Stepper Demo using FormArray</h3>

feat(stepper): Add support for linear stepper #2 - each step as its own form. #6117

feat(stepper): Add support for linear stepper #2 - each step as its own form. #6117

Conversation

g1shin commented Jul 28, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin commented Aug 3, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin commented Aug 8, 2017

rafaelss95 Aug 9, 2017 • edited by jelbourn Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin commented Aug 16, 2017

kara left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmalerba commented Aug 16, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

rafaelss95 Aug 9, 2017 •

edited by jelbourn

Loading