Search code examples
vmware-clarity

Clarity ClrFormsNextModule *clrIfError Reactive Forms

Using Clarity for a work project and I'm unsure if the new clr-control-error messages work with reactive forms. The example they provide on using multiple error messages is with template forms, but the setup should essentially be the same.

Here is my code:

<clr-input-container>
  <label>Password</label>
  <input clrInput type="password" formControlName="password">
  <clr-control-helper>8+ Character Password</clr-control-helper>
  <clr-control-error *clrIfError="'required'">Please Enter Password</clr-control-error>
  <clr-control-error *clrIfError="'minLength'">Password must be 8+ Characters</clr-control-error>
</clr-input-container>

newCompanyForm = new FormGroup({
   email: new FormControl("", [Validators.required]),
   password: new FormControl("", [Validators.required, Validators.minLength(8)]),

I'm using @clr/angular v0.12.4, angular 6.0.2, and rxjs 6.1.0. I can see the form is still invalid once I begin to type into the input field, but the error message never switches from "Please Enter Password" to "Password must be 8+ Characters". Once the password reaches 8 characters the field is no longer invalid so I'm pretty sure the Validator is working, just the error message is not showing.

Solution

  • It looks like maxLength and minLength are transformed into maxlength and minlength internally on the errors object. This should fix it below, though I will investigate this and double check it works in both reactive and template-driven forms. 

    <clr-control-error *clrIfError="'minlength'">