How Can I change/trigger the dirty Flag of an Angular Form Using JavaScript?

Jon
October 5, 2023
226 views
1 vote
2 Answers

I’m trying to change the dirty flag of a form using JavaScript through its DOM element.

To achieve this, I’m utilizing @ViewChild to access the element and then reading it in the ngOnInit lifecycle method (it can be done in different ways, but the goal in this step is to get the native element).

Once I have the form’s DOM element, I attempt to dispatch an event to the form to change/trigger the dirty flag.

However, this approach isn’t working.
Does anyone have suggestions on how to accomplish this?

stackblitz demo

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h1>Welcome from {{ name }}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Discover more about Angular
    </a>

    <form #ngForm="ngForm" name="ngform">
      <input [(ngModel)]="foo" name="foo">
    </form>

    Is it dirty? {{ngForm.dirty | json}}
  `,
})
export class App {
  name = 'Angular';

  @ViewChild('ngForm', { static: true, read: ElementRef }) form!: ElementRef;
  foo = '';

  ngOnInit() {
    const el = this.form.nativeElement;
    el.dispatchEvent(new Event('change'));
    console.log({ el });
  }
}

Tags: angular javascript

Answers

You can read the NgForm instead of the ElementRef and use the markAsDirty method:

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular
    </a>
  
    <form #ngForm="ngForm" name="ngform">
      <input [(ngModel)]="foo" name="foo">
    </form>

    dirty? {{ngForm.dirty |json}}
  `,
})
export class App {
  name = 'Angular';

  @ViewChild('ngForm', { static: true, read: NgForm }) form!: NgForm;
  foo = '';

  ngOnInit() {
    this.form.control.markAsDirty();
  }
}

Try this one

Dispatch a change event to the form element.

Call the markAsDirty() method on the form.

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h1>Welcome from {{ name }}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Discover more about Angular
    </a>

    <form #ngForm="ngForm" name="ngform">
      <input [(ngModel)]="foo" name="foo">
    </form>

    Is it dirty? {{ngForm.dirty | json}}
  `,
})
export class App {
  name = 'Angular';

  @ViewChild('ngForm', { static: true, read: ElementRef }) form!: ElementRef;
  foo = '';

  ngOnInit() {
    const el = this.form.nativeElement;
    el.dispatchEvent(new Event('change'));
    el.form.markAsDirty();
    console.log({ el });
  }
}

This will dispatch a change event to the form element, which will trigger the markAsDirty() method to be called. This will mark the form as dirty.

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h1>Welcome from {{ name }}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Discover more about Angular
    </a>

    <form #ngForm="ngForm" name="ngform">
      <input [(ngModel)]="foo" name="foo">
    </form>

    Is it dirty? {{ ngForm.dirty | json }}
  `,
})
export class App implements OnInit {
  name = 'Angular';

  @ViewChild('ngForm', { static: true }) ngForm!: NgForm;
  foo = '';

  ngOnInit() {
    // Access the form control and mark it as dirty
    this.ngForm.form.get('foo')?.markAsDirty();
    console.log(this.ngForm.form);
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.