每个步骤的角度材料步进组件
我有一个角度材料线性步进器,每一步都是一个单独的角度组件,包含一个需要验证的形式
验证只是不起作用.我可以在不填写表格的情况下进入下一步. 为了说明我的意思,我在stackblitz上创建了一个浓缩版本. 要看的主要内容(我认为)是create-profile.component.html <mat-horizontal-stepper linear #stepper> <mat-step [stepControl]="frmStepOne"> <ng-template matStepLabel>Step One Details</ng-template> <step-one-component></step-one-component> </mat-step> <mat-step [stepControl]="frmStepTwo"> <ng-template matStepLabel>Step Two Details</ng-template> <step-two-component></step-two-component> </mat-step> <mat-step [stepControl]="frmStepThree"> <ng-template matStepLabel>Step Three Details</ng-template> <step-three-component></step-three-component> </mat-step> </mat-horizontal-stepper> 并且每个步骤-X-组件 这是stackblitz. 解决方法
问题出在您的CreateProfileComponent中:
@Component({ selector: 'create-profile-component',templateUrl: './create-profile.component.html' }) export class CreateProfileComponent { frmStepOne: FormGroup; frmStepTwo: FormGroup; frmStepThree: FormGroup; constructor(private fb: FormBuilder) { } } CreateProfileComponent中定义的FormGroup与步进器组件之间没有任何关系.您尝试使用CreateProfileComponent扩展每个StepComponent,但是使用此方法,每个StepComponent都拥有自己的CreateProfileComponent实例,因此有自己的FormGroup声明. 要解决您的问题,您可以为html中的每个StepComponent声明模板变量(以#开头)并将formControl传递给[stepControl]: <mat-horizontal-stepper linear #stepper> <mat-step [stepControl]="step1.frmStepOne"> <ng-template matStepLabel>Step One Details</ng-template> <step-one-component #step1></step-one-component> </mat-step> <mat-step [stepControl]="step2.frmStepTwo"> <ng-template matStepLabel>Step Two Details</ng-template> <step-two-component #step2></step-two-component> </mat-step> <mat-step [stepControl]="step3.frmStepThree"> <ng-template matStepLabel>Step Three Details</ng-template> <step-three-component #step3></step-three-component> </mat-step> </mat-horizontal-stepper> 或者你保留你的html,并使用ViewChild()(我的首选方法). @Component({ selector: 'create-profile-component',templateUrl: './create-profile.component.html' }) export class CreateProfileComponent { @ViewChild(StepOneComponent) stepOneComponent: StepOneComponent; @ViewChild(StepTwoComponent) stepTwoComponent: StepTwoComponent; @ViewChild(StepTwoComponent) stepThreeComponent: StepThreeComponent; get frmStepOne() { return this.stepOneComponent ? this.stepOneComponent.frmStepOn : null; } get frmStepTwo() { return this.stepTwoComponent ? this.stepTwoComponent.frmStepTwo : null; } get frmStepThree() { return this.stepThreeComponent ? this.stepThreeComponent.frmStepThree : null; } } 无论哪种方式,都不需要使用CreateProfileComponent扩展StepComponents,它没有任何意义. @Component({ selector: 'step-x-component',templateUrl: './step-x.component.html',}) export class StepXComponent { public formStepX: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.frmStepX = this.formBuilder.group({ name: ['',Validators.required] }); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- shell – 如何知道给定用户是否具有给定路径的读取和/或写入
- 仿照Bootstrap的input 修改 upload上传图片的样式
- typescript – 如何在Angular2 Beta中使用RouteData?
- Angularjs嵌套状态:3级
- xfire生成webservice客户端 发生xfire undefined element d
- 如何将unix时间戳格式化为RFC3339 – golang?
- angular – 在angluar2 webpack中使用Font-awesome
- 在本地bash函数变量中设置脚本的环境变量
- scala – Hashtable(int)比Hashtable(Map)更具体
- 利用nc当作备用shell管理方案.