feat(stepper): Add support for linear stepper #2 - each step as its own form. by g1shin · Pull Request #6117 · angular/components

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

  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

    "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

-        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

-<h2>Linear Vertical Stepper Demo</h2>
 <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

 </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

      ])
    });
+
+    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

Conversation

g1shin commented Jul 28, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Aug 3, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Aug 8, 2017

Uh oh!

rafaelss95 Aug 9, 2017 • edited by jelbourn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g1shin commented Aug 16, 2017

Uh oh!

kara left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmalerba commented Aug 16, 2017

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

rafaelss95 Aug 9, 2017 •

edited by jelbourn

Loading