Skip to content
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
Contributor

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
Contributor

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
Contributor

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