feat(stepper): Add support for linear stepper #6116

g1shin · 2017-07-28T16:35:23Z

This is the PR for adding support for linear stepper using an array of FormGroups.
Custom errorStateMatcher has been added to be able to show errors for inputs that are not submitted.

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

mmalerba · 2017-07-28T16:53:24Z

src/cdk/stepper/stepper-button.ts

-  host: {'(click)': '_stepper.next()'}
+  host: {
+    '(click)': '_stepper.next()',
+    'type': 'button'


I'm not sure about this, depending on how they've set up their forms they might want this button to trigger submission

Maybe we could add guidance to the docs instead?

I removed 'type': 'button'. I'll add it to the docs instead as @kara suggested.

mmalerba · 2017-07-28T16:54:53Z

src/cdk/stepper/stepper.ts

+  /** Whether the user has interacted with step or not. */
+  get interacted() { return this._interacted; }
+  set interacted(value: any) {
+    this._interacted = coerceBooleanProperty(value);


since this isn't an @Input() you don't have to worry about the coerceBooleanProperty stuff

mmalerba · 2017-07-28T16:56:28Z

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

@@ -1,3 +1,52 @@
+<h2>Linear Vertical Stepper Demo</h2>
+<form [formGroup]="formGroup" novalidate>


why novalidate?

Yep, not necessary

mmalerba · 2017-07-28T16:57:30Z

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

@@ -1,3 +1,52 @@
+<h2>Linear Vertical Stepper Demo</h2>
+<form [formGroup]="formGroup" novalidate>
+  <div formArrayName="formArray">


do we need the div? why not just put formArrayName on the md-vertical-stepper

mmalerba · 2017-07-28T16:58:29Z

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

+  <div formArrayName="formArray">
+    <md-vertical-stepper>
+      <md-step>
+        <div [formGroupName]="0">


formGroupName on md-step and get rid of extra div

mmalerba · 2017-07-28T17:11:22Z

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

+        </div>
+      </md-step>
+
+      <md-step [disabled]="!formGroup.controls.formArray.controls[1].valid">


I don't think this is quite right, you also need to make sure the previous step is enabled, otherwise you might end up in a situation like this:

the 1st step is invalid

the 2nd step is disabled, but has no controls with validation so it's considered valid

the 3rd step would be set to enabled since it's enabledness is based solely off the previous step's validity

(It would be nice if there was some way we could make this easier for users. I don't have any ideas off the top of my head though...)

What about creating a custom validator function for the group or array? It seems like you need to consider more than one form control here, which is the classic situation where that is needed. A higher-level validator would allow you to surface more information in a custom error message, like all step validity or the latest step where all steps before it are valid.

kara · 2017-07-28T17:24:51Z

src/cdk/stepper/stepper-button.ts

-  host: {'(click)': '_stepper.next()'}
+  host: {
+    '(click)': '_stepper.next()',
+    'type': 'button'


Maybe we could add guidance to the docs instead?

kara · 2017-07-28T17:25:14Z

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

@@ -1,3 +1,52 @@
+<h2>Linear Vertical Stepper Demo</h2>
+<form [formGroup]="formGroup" novalidate>


Yep, not necessary

kara · 2017-07-28T17:34:02Z

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

+        </div>
+      </md-step>
+
+      <md-step [disabled]="!formGroup.controls.formArray.controls[0].valid">


Generally speaking, using the get() method is preferred over the controls property. I'd also suggest creating a getter for the array so it's less painful:

<md-step [disabled]="formArray.get([0]).valid">

get formArray() { return this.formGroup.get('formArray'); }

But see comment below about strategy

kara · 2017-07-28T17:36:06Z

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

+        </div>
+      </md-step>
+
+      <md-step [disabled]="!formGroup.controls.formArray.controls[1].valid">


What about creating a custom validator function for the group or array? It seems like you need to consider more than one form control here, which is the classic situation where that is needed. A higher-level validator would allow you to surface more information in a custom error message, like all step validity or the latest step where all steps before it are valid.

jelbourn · 2017-07-28T18:20:20Z

src/cdk/stepper/stepper.ts

+  set disabled(value: any) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;


Can you add a TODO to use the disabled mixin when it's moved to the cdk?

jelbourn · 2017-07-28T18:21:11Z

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

  steps = [
    {label: 'Confirm your name', content: 'Last name, First name.'},
    {label: 'Confirm your contact information', content: '123-456-7890'},
    {label: 'Confirm your address', content: '1600 Amphitheater Pkwy MTV'},
    {label: 'You are now done', content: 'Finished!'}
  ];
+
+  constructor(private _fb: FormBuilder) { }


_fb -> _formBuilder

jelbourn · 2017-07-28T18:47:26Z

src/lib/stepper/stepper.ts

+  }
+
+  /** Custom error state matcher that additionally checks for validity of interacted form. */
+  errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => {


The class should implement ErrorOptions

jelbourn · 2017-07-28T18:47:43Z

src/lib/stepper/stepper.ts

+  }
+
+  /** Custom error state matcher that additionally checks for validity of interacted form. */
+  errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => {


Does it work if this is a prototype method rather than a property?

No because the ErrorOptions stuff is implemented kind of strangely and the context would be lost if we did it as a prototype method. I would like to refactor it, probably not as part of this PR though

jelbourn · 2017-07-28T18:48:21Z

src/cdk/stepper/stepper.ts

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


Can you expand this comment to describe what "interacted with" means?

jelbourn · 2017-07-28T18:51:12Z

src/lib/stepper/stepper.ts

+
+  /** Custom error state matcher that additionally checks for validity of interacted form. */
+  errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => {
+    let originalErrorState = this._originalErrorStateMatcher(control, form);


Can you add a comment that explains the background for why we are doing this custom error matcher stuff? (i.e., everything we talked about in the meeting)

g1shin · 2017-07-31T21:08:33Z

Changes have been made; ready for review. 👍

mmalerba · 2017-07-31T21:09:40Z

src/cdk/stepper/stepper.ts

+
+  /** Whether user has seen the expanded step content or not . */
+  get interacted() { return this._interacted; }
+  set interacted(value: boolean) {


setter/getter isn't doing anything can switch to

interacted = false;

mmalerba · 2017-07-31T21:21:39Z

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

+   * Form array validator to check if all form groups in form array are valid.
+   * If not, it will return the index of the first invalid form group.
+   */
+  private _stepValidator: ValidatorFn = (formArray: FormArray): ValidationErrors | null => {


I was imagining this more as something that we define in our code and users can just import and use.

mmalerba · 2017-07-31T21:29:55Z

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

+    </md-step>
+
+    <md-step
+        [disabled]="formArray.hasError('invalid step') ?


This doesn't really seem to have made the disabled logic much easier... is that what you had in mind @kara or is there a better way to organize the custom validator?

@mmalerba wouldn't it be better to not direct;y use the previous step form validity on the disabled input and instead use a @Input() valid which you would pass the current step validity and internally check the validation so you would have <md-step [valid]="formGroup.controls.formArray.controls[0].valid">.

It's going to be more complex than just checking if the previous is valid because it's going to need to validate against disabled, editable, optional and completed.

@joejordanbrown The changed code no longer only checks for the previous step's validity. Now it uses the custom step validation function stepValidator to check for the validity of all the previous steps. If there's a step that is invalid, it will return the smallest index of the step that is invalid to compare with the index of the step that is being triggered.

@mmalerba : Waiting for @kara 's response on additional suggestions regarding this.

@g1shin I see that, but I think it's too complex for the end user to have to add that to each step. It's going to get confusing for people when you use that with *ngFor and people will make mistakes. Especially when it's going to have a lot more options added in future for [editable] and [optionial].

You should be using less than operator < instead of less than or equal operator <= for your disabled logic. The second step should be [disabled]="formArray.hasError('invalid step') ? formArray.getError('invalid step').index < 1 : false" you are also missing the required validation on your second step to be able to test this.

phoneFormCtrl: ['', Validators.required],

Do you have the design document for the stepper? I don't see it on the wiki.

…and use

g1shin · 2017-08-03T16:55:58Z

Changes have been made based on review.

mmalerba · 2017-08-03T20:46:50Z

src/cdk/stepper/stepper.ts

@@ -84,7 +97,8 @@ export class CdkStepper {
  @Input()
  get selectedIndex() { return this._selectedIndex; }
  set selectedIndex(index: number) {
-    if (this._selectedIndex != index) {
+    this._steps.toArray()[this._selectedIndex].interacted = true;
+    if (this._selectedIndex != index && !this._steps.toArray()[index].disabled) {
      this._emitStepperSelectionEvent(index);


I think we only want to emit a change event if the selected index changes due to user interaction, therefore this should be moved to one of the user event handlers

I thought this is commonly called by all user interactions and that's why we decided to delegate emitting a change event here. Is this not what you meant?

mmalerba · 2017-08-03T20:53:34Z

src/lib/stepper/stepper.ts

+ * Form array validator to check if all form groups in form array are valid.
+ * If not, it will return the index of the first invalid form group.
+ */
+export const stepValidator: ValidatorFn = (formArray: FormArray): ValidationErrors | null => {


should probably be called stepperValidator since it's attached to the FormArray representing the whole stepper, not the FormGroups representing the steps.

mmalerba · 2017-08-03T20:55:21Z

src/lib/stepper/stepper.ts

    super(mdStepper);
+    this._originalErrorStateMatcher =


FYI, #6147 should make this easier

I saw the PR, but should this change be made after that PR is merged into master and 'stepper' branch has synced to upstream master?

yep, just an fyi

g1shin · 2017-08-05T00:28:40Z

@kara @mmalerba I tried implementing @Input() for the AbstractControl of each step and checking for the validity of the step using that property. Does this implementation seem to align with what we decided on during today's meeting?

Also, Miles, I'll make address your other comments later after first settling on an approach for Form related things.

mmalerba · 2017-08-05T02:12:48Z

This looks like the right idea to me. I'll let @kara comment on whether this covers all of the cases she mentioned.

I think we should also add a linear attribute to the stepper that toggles whether or not we force the user to make previous steps valid before allowing them to move on (like we had in the original design doc for stepper).

kara

LGTM, nits

kara · 2017-08-07T22:09:30Z

src/lib/stepper/stepper.ts

+/**
+ * Form array validator to check if all form groups in form array are valid.
+ * If not, it will return the index of the first invalid form group.
+ */


Is this comment left over from a previous implementation? Doesn't seem to go with MdStep.

kara · 2017-08-07T22:21:13Z

src/cdk/stepper/stepper.ts

@@ -84,6 +97,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++) {
+      if (!this._steps.toArray()[i].stepControl.valid) { return; }


Nit: Here you're calling toArray() every index of the loop. Perhaps save it at the top instead?

const steps = this._steps.toArray(); steps[this._selectedIndex].interacted = true; for (let i =0; i < index; i++) { if (!steps[i].stepControl.valid) { return; } }

I'd also consider maybe breaking this loop out into its own mini-method, like _anyControlsInvalid.

g1shin · 2017-08-08T01:27:45Z

Form control approach implemented and linear attribute added to stepper; ready for review again 👍

mmalerba

Almost there, couple more things

mmalerba · 2017-08-08T15:41:00Z

src/cdk/stepper/stepper.ts

@@ -71,6 +84,7 @@ export class CdkStep {
  host: {
    '(focus)': '_focusStep()',
    '(keydown)': '_onKeydown($event)',
+    '[linear]': 'linear',


don't need this

mmalerba · 2017-08-08T15:41:50Z

src/cdk/stepper/stepper.ts

+  @Input()
+  get linear() { return this._linear; }
+  set linear(value: any) {
+    this._linear = coerceBooleanProperty(value);


nit: can 1-line the setter as well

mmalerba · 2017-08-08T15:43:09Z

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

@@ -1,3 +1,46 @@
+<h2>Linear Vertical Stepper Demo</h2>
+<form [formGroup]="formGroup">
+  <md-vertical-stepper formArrayName="formArray" linear>


can we do [linear]="isLinear" and add a checkbox to toggle it, that way its easy to test

mmalerba · 2017-08-08T15:43:41Z

src/lib/stepper/stepper.ts

    super(mdStepper);
+    this._originalErrorStateMatcher =


yep, just an fyi

g1shin · 2017-08-08T16:40:08Z

Changes made based on review 😄

jelbourn · 2017-08-08T16:54:14Z

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 delete the entire paths property in this tsconfig now

possibly... depends where her stepper branch is synced to

@jelbourn @mmalerba The stepper branch is not synced up-to-date with the master branch yet. I was going to finish merging the two form control PRs that are already out, then do the syncing all together.

jelbourn · 2017-08-08T16:57:16Z

src/lib/stepper/stepper.ts

+     * Custom error state checks for the validity of form that is not submitted or touched
+     * since user can trigger a form change by calling for another step without directly
+     * interacting with the current form.
+     */


Use inline-style (//) comments for local variables

@input

* 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

@input

* 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

@input

* 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

@input

* 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

@input

* 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

@input

* 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

@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-06T20:03:37Z

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 16:35

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

Add form controls and custom error state matcher

74b24ce

g1shin force-pushed the forms1 branch from 35e1508 to 74b24ce Compare July 28, 2017 16:36

g1shin mentioned this pull request Jul 28, 2017

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

Merged

mmalerba reviewed Jul 28, 2017

View reviewed changes

kara reviewed Jul 28, 2017

View reviewed changes

jelbourn reviewed Jul 28, 2017

View reviewed changes

Modify form controls for stepper-demo and add custom validator

5d78514

mmalerba reviewed Jul 31, 2017

View reviewed changes

Move custom step validation function so that users can simply import …

5e57f17

…and use

mmalerba reviewed Aug 3, 2017

View reviewed changes

kara approved these changes Aug 7, 2017

View reviewed changes

jwshinjwshin added 3 commits August 7, 2017 16:41

Implement @input() stepControl for each step

1acfef4

Merge branch 'stepper' of github.com:angular/material2 into forms1

71cb69f

Add linear attribute to stepper

e648c0e

g1shin force-pushed the forms1 branch from e0b0674 to e648c0e Compare August 8, 2017 01:25

mmalerba reviewed Aug 8, 2017

View reviewed changes

jelbourn reviewed Aug 8, 2017

View reviewed changes

mmalerba approved these changes Aug 8, 2017

View reviewed changes

mmalerba added the pr: lgtm label Aug 8, 2017

Add enabling/disabling linear state of demo

d8b53ef

g1shin force-pushed the forms1 branch from 2aa0344 to d8b53ef Compare August 8, 2017 21:16

g1shin merged commit dfecded into angular:stepper Aug 8, 2017

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

		@@ -1,3 +1,52 @@
		<h2>Linear Vertical Stepper Demo</h2>
		<form [formGroup]="formGroup" novalidate>

feat(stepper): Add support for linear stepper #6116

feat(stepper): Add support for linear stepper #6116

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

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

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

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 Jul 31, 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

g1shin commented Aug 5, 2017

mmalerba commented Aug 5, 2017

kara left a 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

mmalerba left a 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 8, 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

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