I have made some slight modifications to the login form supplied by Clarity Design Systems ([here](https://clarity.design/angular-components/login/)). Namely I'm using a `FormGroup` to handle validation of the controls. In my form's submission I am running the following code:

```ts
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`:

```ts
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:

```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>

```