Reactive Forms - Mat Select - doesn't trigger form or control as invalid after control has been touched, and validator.required is set to true

[dreamstar-enterprises]

trafficstars

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

Yes

Description

With this code

   this.contractEngagementInfo.addControl('jobTitle',
      this.formBuilder.control(null, [Validators.required]));

<!-- select -->
      <mat-select
        id="jobTitle"
        placeholder="Select a job title"
        formControlName="jobTitle"
        required>
        <mat-option>-- None --</mat-option>
        @for (jobTitle of allowableOptions;
          track jobTitle) {
          <mat-option [value]="jobTitle">{{jobTitle}}</mat-option>
        }
      </mat-select>

Current bug behaviour is that:

If the control gets loaded with data that is not amongst the allowable options, it will display

'Select a job title' - i.e. the placeholder. If I touch the control and select None, the control (and form) will become invalid, saying the field is required - great!

However, if I touch the control and don't select None, or the other options, and unclick away from the contrl, I'd expect that since I have a validator.required validator on the cnotrl, that because I touched the control, it should ALSO say control (and form) are invalid, when I unclick away from it (just like what happens with a normal input field)

This currently doesn' happen, and means if the data loaded initially is wrong, a user can send back the same invalid data (since Angular never sees the form as invalid)

Please provide a link to a minimal reproduction of the bug

Reproduction on Stackblitz

Please provide the exception or error you saw

See above

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

[JeanMeche]

Hi, can you please provide a working stackblitz repro, thank you.

[dreamstar-enterprises]

Pls see here:

https://stackblitz.com/edit/stackblitz-starters-gs9gmh?file=src%2Fmain.ts

(but, in Stackblitz, I get an allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component. [plugin angular-compiler] for the angular component)

[JoostK]

The expected behavior here is debatable. From FormControl's perspective this is certainly working as expected, it doesn't have any knowledge of what "allowed" means; there is no validator present to verify that the value is among a set of expected values.

As for MatSelect, that is a bit tricky to define. Should it force-select the first option when it cannot match the value with an existing option, thereby updating the FormControl's value? That would cause your desired behavior, but it may not be everyone's desired behavior.

[dreamstar-enterprises]

Fair points. I think I can add a custom validator (to check if the value is in the allowable list), but how will this trigger, given that the value.required validator already doesn't trigger when I click / touch the control, when I initialise the component and form?

[dreamstar-enterprises]

Hi, I still couldn't get this to work, in JetBrains.

[pkozlowski-opensource]

Could you please have a look at it from the MatSelect perspective? Feel free to open a form-related issue if there are limitations there.

[dreamstar-enterprises]

I think I'll open another issue. Am I missing something though? Surely the behaviour should be the same as a normal input field - so the behaviour is consistent. Once it's touched, and if it is required, then after it has been touched, it should become invalid. Before it's touched, it's fine for it to be valid.

[crisbeto]

Closing since the repro doesn't compile. Also here are the docs for customizing when error messages show up: https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}