Angular 控制验证的清晰设计系统

Question

我对 Clarity Design Systems (here) 提供的登录表单做了一些细微的修改。也就是说，我正在使用 FormGroup 来处理控件的验证。在我的表单提交中，我是运行以下代码：

login(): void {
    if (this.form.invalid) {
        this.form.markAllAsTouched();
        return;
    }
    console.log('success');
}

private buildForm(): FormGroup {
    return this.formBuilder.group({
        username: [ null, Validators.required ],
        password: [ null, Validators.required ],
        rememberMe: false
    });
}

但是，控件的样式并没有像我期望的那样带有红色边框和红色占位符。如果我手动单击控件并在没有值的情况下单击它，则会出现样式。我的第一个想法是，在表单上做这件事可能有些挑剔，所以我决定尝试迭代控件并调用 markAsTouched:

login(): void {
    if (this.form.invalid) {
        Object.keys(this.form.controls).forEach(controlName => {
            this.form.get(controlName)?.markAsTouched();
        });
        return;
    }
    console.log('success');
}

但这也不会设置控件的样式。使用 reset、setValue 或 patchValue.

也不会将迭代值设置为自身

是什么导致了这个问题？

更新

根据请求，这是组件的 HTML:

<div class="login-wrapper">
    <form class="login" [formGroup]="form" (submit)="login()">
        <section class="title">
            <h3 class="welcome">Welcome to</h3>
            Company Product Name
        </section>
        <div class="login-group">
            <clr-input-container>
                <label class="clr-sr-only">Username</label>
                <input type="text" name="username" clrInput placeholder="Username" formControlName="username" />
            </clr-input-container>
            <clr-password-container>
                <label class="clr-sr-only">Password</label>
                <input type="password" name="password" clrPassword placeholder="Password" formControlName="password" />
            </clr-password-container>
            <clr-checkbox-wrapper>
                <label>Remember me</label>
                <input type="checkbox" name="rememberMe" clrCheckbox formControlName="rememberMe" />
            </clr-checkbox-wrapper>
            <div class="error active" *ngIf="error">
                {{error}}
            </div>
            <button type="submit" class="btn btn-primary">NEXT</button>
        </div>
    </form>
</div>

Answer 1

你可以尝试通过获取值来实现。

login(): void {
    if (this.form.invalid) {
        Object.values(this.form.controls).forEach(control => {
            control.markAsTouched();
        });
        return;
    }
    console.log('success');
}

祝好，希望对您有所帮助。

更新

我没有用过清晰度设计，我在网上看到过这个。

<clr-control-error *clrIfError="'required'">YOU_ERROR_MESSAGE</clr-control-error>

问候。

Answer 2

您缺少表单标签上的 clrForm 指令。

正确的代码应该是这样的：

<form clrForm class="login" [formGroup]="form" (submit)="login()">

Angular 控制验证的清晰设计系统

Clarity Design System for Angular Control Validation

angular

formgroups