markAllAsTouched not firing

[krabouilleur]

Describe the bug

I've an input text, with a validator required. If I write then I make the field empty, the field is red (cause ng-dirty + ng-invalid)

If I click on my submit button which test the form with "markAllAsTouched() the field is not red (ng-invalid but not ng-dirty)

Environment

angular 17 standalone

Reproducer

No response

Angular version

17.3.0

PrimeNG version

17.16.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.9.0

Browser(s)

chrome

Steps to reproduce the behavior

html:

<form [formGroup]="form" class="flex">
            <div class="flex flex-column gap-2">
                <label for="name">xxxx</label>
                <input pInputText id="name" [formControl]="f_name" />
                <small id="key-alias-help">xxx</small>
            </div>
        </form>
 <p-button [label]="xxx" (onClick)="test()"/>

component:

Component({
  standalone: true,
  imports: [ReactiveFormsModule...],

get f_name() {
    return this.form.get('name') as FormControl;
  }
  form = this.fb.group({
    name: [null, [Validators.required]]
  });

test() {
    this.form.markAllAsTouched();

Expected behavior

inputtext become red with the ng-dirty css class

[B34v0n]

Hi there, I got the same Issue and created a stackblitz for it. https://github.com/primefaces/primeng/issues/16118 I just saw, that you tried to do it with markAsTouched(), which only sets the fields to touched, not to dirty. I need the error to be seen as soon as the field is touched, not only on dirty.

For your use-case, you could iterate over the fields and use the markAsDirty-Method, which sets them to dirty, so the error is shown