角7 - 如何形式的子组件显示错误信息提交表单时

问题描述 投票:3回答:1

我实现一个注册页面,角7和角料。在该页面中我使用一个密码输入组件,它获取到使用FormGroup的参考。外组件处理逻辑部分(F.E.的FormGroup的样子,该FormControls是如何定义的,并且每个输入是如何验证)。当我点击进入密码输入,然后点击别的地方/输入任何内容无效,显示正确的输入的错误消息。但是,当我在提交按钮单击时不接触任何输入字段中,FormGroup的FormControl被验证(该FormControl甚至说,他有一个错误),但没有触及,所以没有错误消息显示。

我已经抬起头来如何解决这个问题。有些人建议手动设置所有窗体控件点击提交按钮后为感动。是的,这工作,但我想有一个通用的解决方案,所以我不必为每一个表单我在将来做到这一点。

signup.component.ts:

export class SignupComponent implements OnInit {

    signupForm: FormGroup;

    constructor() { }

    ngOnInit() {
        this.signupForm = new FormGroup({
            'password': new FormControl('', [Validators.required]),
            'contact': new FormControl('', [Validators.required])
        });
    }

    onSubmit() {
        console.log('Form validity: ' + this.signupForm.valid);
    }

}

signup.component.html:

<mat-card class="signup-card">
    <h1 class="signup-title">Sign up</h1>

    <form [formGroup]="signupForm" #form="ngForm" (ngSubmit)="onSubmit()" fxLayout="column">
        <!-- Password -->
        <app-base-password-input [parentForm]="signupForm"></app-base-password-input>

        <!-- Contact -->
        <div class="signup-contact">
            <mat-checkbox formControlName="contact" required>We may contact you.</mat-checkbox>
            <mat-error *ngIf="form.submitted && signupForm.controls['contact'].hasError('required')">Please check this box.</mat-error>
        </div>

    <button class="signup-button" mat-raised-button color="primary" type="submit">Sign up</button>

    </form>
</mat-card>

应用碱基密码input.component.ts:

export class BasePasswordInputComponent {

    @Input() parentForm: FormGroup;

    constructor() { }

}

应用碱基密码input.component.html:

<mat-form-field [formGroup]="parentForm">
    <mat-label>Password</mat-label>
    <input matInput type="password" formControlName="password" required>
    <mat-error *ngIf="parentForm.controls['password'].hasError('required')">Password is required.</mat-error>
</mat-form-field>

我期待什么: 当我在提交按钮单击不接触/点击任何输入字段,每个输入显示错误信息指标(如嘿,用户!我需要!)。

到底发生了什么: 当我在提交按钮点击而不接触/点击任何输入字段,只有在该外部部件显示错误消息中定义的FormControls(这种情况下:接触复选框)。我输入组件没有显示错误消息(这种情况下:密码组件)。

我希望我贴你需要回答我的问题一切。如果事情还不清楚,我会更新帖子:)

angular forms submit formgroups
1个回答
0
投票

我知道这样做的唯一方法是,如你所说,设置每个FormControl作为onSubmit()方法手动“感动”。

SignupComponent.ts

onSubmit(){
    console.log('Form validity: ' + this.signupForm.valid);
    touchAllElements(this.signupForm);
}

touchAllElements(formGroup:FormGroup){
    Object.keys(formGroup["controls"]).forEach(element => {
        formGroup.get(element).markAsTouched();
    });
}

为了避免与形式的每个组件重复这种方法,你可以touchAllElements移动到服务

© www.soinside.com 2019 - 2024. All rights reserved.