-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
Changes from all commits
74b24ce
5d78514
5e57f17
1acfef4
71cb69f
e648c0e
d8b53ef
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,39 @@ | ||
import {Component} from '@angular/core'; | ||
import {Validators, FormBuilder, FormGroup} from '@angular/forms'; | ||
|
||
@Component({ | ||
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.'}, | ||
{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!'} | ||
]; | ||
|
||
/** Returns a FormArray with the name 'formArray'. */ | ||
get formArray() { return this.formGroup.get('formArray'); } | ||
|
||
constructor(private _formBuilder: FormBuilder) { } | ||
|
||
ngOnInit() { | ||
this.formGroup = this._formBuilder.group({ | ||
formArray: this._formBuilder.array([ | ||
this._formBuilder.group({ | ||
firstNameFormCtrl: ['', Validators.required], | ||
lastNameFormCtrl: ['', Validators.required], | ||
}), | ||
this._formBuilder.group({ | ||
phoneFormCtrl: [''], | ||
}) | ||
]) | ||
}); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,26 +15,56 @@ import { | |
// considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953) | ||
// tslint:disable-next-line:no-unused-variable | ||
ElementRef, | ||
Inject, | ||
Optional, | ||
QueryList, | ||
SkipSelf, | ||
ViewChildren | ||
}from '@angular/core'; | ||
import {MdStepLabel} from './step-label'; | ||
import { | ||
defaultErrorStateMatcher, | ||
ErrorOptions, | ||
MD_ERROR_GLOBAL_OPTIONS, | ||
ErrorStateMatcher | ||
} from '../core/error/error-options'; | ||
import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; | ||
|
||
@Component({ | ||
moduleId: module.id, | ||
selector: 'md-step, mat-step', | ||
templateUrl: 'step.html' | ||
templateUrl: 'step.html', | ||
providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}] | ||
}) | ||
export class MdStep extends CdkStep { | ||
export class MdStep extends CdkStep implements ErrorOptions { | ||
/** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */ | ||
@ContentChild(MdStepLabel) stepLabel: MdStepLabel; | ||
|
||
constructor(mdStepper: MdStepper) { | ||
/** Original ErrorStateMatcher that checks the validity of form control. */ | ||
private _originalErrorStateMatcher: ErrorStateMatcher; | ||
|
||
constructor(mdStepper: MdStepper, | ||
@Optional() @SkipSelf() @Inject(MD_ERROR_GLOBAL_OPTIONS) errorOptions: ErrorOptions) { | ||
super(mdStepper); | ||
this._originalErrorStateMatcher = | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. FYI, #6147 should make this easier There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yep, just an fyi |
||
errorOptions ? errorOptions.errorStateMatcher || defaultErrorStateMatcher | ||
: defaultErrorStateMatcher; | ||
} | ||
|
||
/** Custom error state matcher that additionally checks for validity of interacted form. */ | ||
errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The class should There was a problem hiding this comment. Choose a reason for hiding this commentThe 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? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No because the |
||
let originalErrorState = this._originalErrorStateMatcher(control, form); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
let customErrorState = control.invalid && this.interacted; | ||
|
||
return originalErrorState || customErrorState; | ||
} | ||
} | ||
|
||
export class MdStepper extends CdkStepper { | ||
export class MdStepper extends CdkStepper implements ErrorOptions { | ||
/** The list of step headers of the steps in the stepper. */ | ||
@ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>; | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should be able to delete the entire
paths
property in this tsconfig nowThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
possibly... depends where her stepper branch is synced to
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.