Identifying when ngModel is dirty

Question

Identifying when ngModel is dirty

In my application, the input fields are populated dynamically based on the API response. Each field has a corresponding set of buttons associated with it, which I only want to show when the field is edited.

Here is an image of the form:

https://i.sstatic.net/8opQq.png

I am currently using simple ngModel for viewing and changing the values. Since the fields do not have complex validations, I am not interested in using a reactive form approach. My requirement is that when a user types into a field, the respective button set should appear. Upon clicking either button, the field should return to its original pristine state.

Below is the code snippet for populating the template:

<h5 class="mb-4">Report Configuration</h5>
<div class="form-group row" *ngFor="let config of reportConfig">
  <label class="col-sm-12 col-md-4 col-form-label">{{config.title}} <span
      class="text-danger">*</span></label>
  <div class="col-sm-12 col-md-6 col-lg-6">
    <input type="text" [class.is-invalid]="false" [id]="config.propertyKey" [(ngModel)]="config.propertyValue" class="form-control" />
    <!-- On typing the field should be marked dirty & buttons should appear -->
  </div>
  <div class="col-sm-12 col-md-2 col-lg-2 pl-0">
    <mat-icon class="mr-2" (click)="should mark the field pristine">check_small</mat-icon>
    <mat-icon color="warn" (click)="should mark the field pristine">close_small</mat-icon>
  </div>
</div>

Can this functionality be achieved using ngModel, or do I need to use FormArray to accomplish this?

javascript angular typescript angular-reactive-forms angular-forms

Answer 1

Answer №1

An ngModel is inherited from AbstractControlDirective, allowing you to access its properties such as valid, touched, or dirty. To do this, use a template reference variable (named ""#nameID" in the code below).

<div *ngFor="let config of reportConfig">
    <input name="name" #nameID="ngModel" [(ngModel)]="config .name"/> 
    <button *ngIf="nameID.dirty">undo</button>

    <pre>
    {{nameID.control.dirty}} or {{nameID.dirty}}
    {{nameID.control.touched}} or {{nameID.touched}}
    {{nameID.control.valid}} or {{nameID.valid}}
    </pre>
</div>

Remember that a template reference variable has its own "scope" within an ngFor loop, so there should be no issues with using it.

Answer 2

An ngModel is inherited from AbstractControlDirective, allowing you to access its properties such as valid, touched, or dirty. To do this, use a template reference variable (named ""#nameID" in the code below).

<div *ngFor="let config of reportConfig">
    <input name="name" #nameID="ngModel" [(ngModel)]="config .name"/> 
    <button *ngIf="nameID.dirty">undo</button>

    <pre>
    {{nameID.control.dirty}} or {{nameID.dirty}}
    {{nameID.control.touched}} or {{nameID.touched}}
    {{nameID.control.valid}} or {{nameID.valid}}
    </pre>
</div>

Remember that a template reference variable has its own "scope" within an ngFor loop, so there should be no issues with using it.

Answer 3

Answer №2

Here is a tip for your ngModel in HTML:

(change)="detectDirty(value)"

Remember to add this code to your TypeScript file as well:

detectDirty(value) {
 if (value.dirty) {
  //Your code goes here
 }
}

In essence, the ngModel utilizes the dirty property to determine if an input has been modified or not.

Answer 4

Here is a tip for your ngModel in HTML:

(change)="detectDirty(value)"

Remember to add this code to your TypeScript file as well:

detectDirty(value) {
 if (value.dirty) {
  //Your code goes here
 }
}

In essence, the ngModel utilizes the dirty property to determine if an input has been modified or not.

Answer 5

Answer №3

If you want to assign a template reference variable, use the # symbol:

<input #variable="ngModel" type="text" [class.is-invalid]="false" [id]="config.propertyKey" [(ngModel)]="config.propertyValue" class="form-control" />

Once set, you can modify the pristine property by calling the markAsPristine() function:

<mat-icon class="mr-2" (click)="variable.control.markAsPristine()">check_small</mat-icon>

For more information, refer to this example in the official documentation: https://angular.io/guide/forms#show-and-hide-validation-error-messages

Remember: Reactive forms not only handle form validation but also provide access to form values, unlike template-driven forms.

Answer 6

If you want to assign a template reference variable, use the # symbol:

<input #variable="ngModel" type="text" [class.is-invalid]="false" [id]="config.propertyKey" [(ngModel)]="config.propertyValue" class="form-control" />

Once set, you can modify the pristine property by calling the markAsPristine() function:

<mat-icon class="mr-2" (click)="variable.control.markAsPristine()">check_small</mat-icon>

For more information, refer to this example in the official documentation: https://angular.io/guide/forms#show-and-hide-validation-error-messages

Remember: Reactive forms not only handle form validation but also provide access to form values, unlike template-driven forms.

Identifying when ngModel is dirty

Answer №1

Answer №2

Answer №3

Similar questions

Unpacking objects in Typescript

Conceal a column within a nested HTML table

What is the process for implementing custom color props with Material-UI v5 in a React TypeScript project?

Using Backbone to Retrieve a JSON File from a Server: Deciding Whether to Include the File Extension ".json" in the URL or URLRoot

Utilizing Vue.js for Tabs in Laravel 5.8

The inability to access data from an API is a result of the lack of a functioning

Eslint has encountered a parsing error, it was not expecting that token

The property is accessed prior to being initialized

What is the most efficient way to extract distinct elements from an array in NodeJS?

Node API session functioning properly on Postman but experiencing issues in web browser

Using a responsive menu (mmenu) can lead to an increase in Cumulative Layout

accessing the php script within a node environment

Rerendering of a React component occurs upon a change in its state

Effectiveness in identifying groups (?: => task(?:s+)?team COMPARED TO effort(s+)?group

Animating scrollTop using jQuery is a useful feature for creating

Production Server experiencing issues with sending Large Lists via Http Post

Angular: Maximizing Input and Output

Fetching data using ajax and then appending it to the webpage

Having trouble installing Bootstrap using the `npm i bootstrap` command? It seems like the

What could be the reason for the empty response in my PATCH request in Javascript?