Clarity Design System for Angular Control Validation

Question

I have made some slight modifications to the login form supplied by Clarity Design Systems (here). Namely I'm using a FormGroup to handle validation of the controls. In my form's submission I am running the following code:

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
    });
}

However, the controls are not styling with the red borders and red placeholder as I would expect. If I click on the control manually and click out of it without there being a value then the styling appears. My first thought was that perhaps there was something finiky about doing it on the form, so I decided to try and iterate over the controls and call markAsTouched:

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

But this does not style the control either. Neither does setting the iterated value to itself using reset, setValue, or patchValue.

What could be causing this issue?

Update

Per request, this is the component's 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

You're missing clrForm directive on the form tag.

Correct code should look like this:

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