Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 8, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Add enabling/disabling linear state of demo
  • Loading branch information
jwshinjwshin committed Aug 8, 2017
commit d8b53ef1e5557c83203907567b37e37a42fc0dc7
7 changes: 2 additions & 5 deletions src/cdk/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,7 @@ export class CdkStep {
selector: 'cdk-stepper',
host: {
'(focus)': '_focusStep()',
'(keydown)': '_onKeydown($event)',
'[linear]': 'linear',
'(keydown)': '_onKeydown($event)'
},
})
export class CdkStepper {
Expand All @@ -97,9 +96,7 @@ export class CdkStepper {
/** Whether the validity of previous steps should be checked or not. */
@Input()
get linear() { return this._linear; }
set linear(value: any) {
this._linear = coerceBooleanProperty(value);
}
set linear(value: any) { this._linear = coerceBooleanProperty(value); }
private _linear = false;

/** The index of the selected step. */
Expand Down
3 changes: 2 additions & 1 deletion src/demo-app/stepper/stepper-demo.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<h2>Linear Vertical Stepper Demo</h2>
<md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>
<form [formGroup]="formGroup">
<md-vertical-stepper formArrayName="formArray" linear>
<md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
<md-step formGroupName="0" [stepControl]="formArray.get([0])">
<ng-template mdStepLabel>Fill out your name</ng-template>
<md-input-container>
Expand Down
3 changes: 2 additions & 1 deletion src/demo-app/stepper/stepper-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import {Validators, FormBuilder, FormGroup} from '@angular/forms';
moduleId: module.id,
selector: 'stepper-demo',
templateUrl: 'stepper-demo.html',
styleUrls: ['stepper-demo.scss'],
styleUrls: ['stepper-demo.scss']
})
export class StepperDemo {
formGroup: FormGroup;
isNonLinear = false;

steps = [
{label: 'Confirm your name', content: 'Last name, First name.'},
Expand Down
8 changes: 3 additions & 5 deletions src/lib/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,9 @@ export class MdStep extends CdkStep implements ErrorOptions {
errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The class should implement ErrorOptions

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

let originalErrorState = this._originalErrorStateMatcher(control, form);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)


/**
* 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.
*/
// 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.
let customErrorState = control.invalid && this.interacted;

return originalErrorState || customErrorState;
Expand Down