prusik :
We had the exact same problem, and found a working solution after several days of trial and error. Basically since the steps are divided into several components that each define a form, and that their corresponding stepControl must be in the parent, the FormGroup in the child component must be sent to the parent component that defines the stepper. After creating the FormGroup, emit an event and have the parent listen to that event, and pass the FormGroup through that event. You can apply this for all children, creating a separate event for each and a separate listener in the parent for each emitter.\n\nIn the child component:\n\n\ndeclare the event \n\n@Output() notify: EventEmitter<FormGroup> = new EventEmitter<FormGroup>(); \n\nemit the formGroup to the parent component \n\nthis.notify.emit(this.myFormGroup); \n\n\n\nIn the parent component containing the mat-stepper's stepControl(s):\n\n\nIn the component(.ts), add a function that will receive and set the formgroup:\n\nmyFormGroup: FormGroup;\nonNotify(formGroup: FormGroup): void {\n this.myFormGroup = formGroup;\n}\n\nIn the html, add the notification listener:\n\n<mat-step [completed]=\"false\" [stepControl]=\"myFormGroup\">\n <ng-template matStepLabel>Step 1</ng-template>\n <app-child (notify)='onNotify($event)'></app-child>\n</mat-step> \n\n\n\nNested components explanations: https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/ ",
2017-12-05T19:38:19