What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Is there a way to automatically clear all typed characters in form fields when switching between radio buttons with the same ngModel on different pages? I noticed that the characters I type in one field are retained when I switch to another radio button.

[1]: https://i.stack.imgur.com/N7lhz.png

[2]: https://i.stack.imgur.com/M81mh.png

<div class="row text-center mt-3">
    <div class="col-sm-4 col-md-4 col-lg-4">
        <p-radioButton name="Members" [(ngModel)]="MemberOption" (click)="clear()" value="Team" label="Team/Academy"></p-radioButton>
    </div>

    <div class="col-sm-4 col-md-4 col-lg-4">
        <p-radioButton name="Members" [(ngModel)]="MemberOption" (click)="clear()" value="Company" label="Company"></p-radioButton>
    </div>
</div>

<div class="row mx-auto" id="MemOpt">
<div for="MemOpt" *ngIf="MemberOption === 'Team'">
    <div class="col-12">
        <div class="input-container mb-3">
            <label>* Team/Academy Name</label>
            <input name="name" #name="ngModel" id="TACName" type="text" [(ngModel)]="SignUp.Name" pInputText required/>
            <label *ngIf="!(name.pristine || name.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Team/Academy Name Required!</label>
        </div>
    </div>

    <div class="col-12">
        <div class="input-container">
            <label for="Address">* Address</label>
            <input name="address" #address="ngModel" id="Address" type="text" [(ngModel)]="SignUp.Address" pInputText required/>
            <label *ngIf="!(address.pristine || address.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Address Required!</label>
        </div>
    </div>
</div>

<div for="MemOpt" *ngIf="MemberOption === 'Company'">
    <div class="input-container mb-3">
        <div class="col-12">
            <label>* Company Name</label>
            <input name="name" #name="ngModel" id="TACName" type="text" [(ngModel)]="SignUp.Name" pInputText required/>
            <label *ngIf="!(name.pristine || name.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Company Name Required!</label>
        </div>
    </div>

    <div class="col-12">
        <div class="input-container">
            <label for="Address">* Address</label>
            <input name="address" #address="ngModel" id="Address" type="text" [(ngModel)]="SignUp.Address" pInputText required/>
            <label *ngIf="!(address.pristine || address.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Address Required!</label>
        </div>
    </div>
</div>

htmlangulartypescript

Answer №1

When you click on the radio button, the ngModel value will be reset by setting the properties to empty strings.

Check out the code in the component class:

clear() {
    this.User = new User();
}

Here's the corresponding code in the HTML file:

<input type="radio" name="userType" id="teamRadio" [(ngModel)]="selectedOption" value="Team" (click)="clear()"><label for="teamRadio">Team</label>
<input type="radio" name="userType" id="companyRadio" [(ngModel)]="selectedOption" value="Company" (click)="clear()"><label for="companyRadio">Company</label>

For a live demonstration, you can visit the following StackBlitz link:

StackBlitz Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to link with 'NgModel' as it is not recognized as a valid property of 'ion-input'

I'm experiencing some difficulty with the following error message: Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'NgModel' since it isn't a known property of 'ion-input'. 1. If 'ion-input ...

angularionic3

When null is assigned to a type in Typescript, it does not result in an error being triggered

Could someone enlighten me on why this code is not causing an error? import { Injectable } from '@angular/core'; interface Animal{ name: string; } @Injectable() export class AnimalService { lion: Animal = null; constructor() {} get(){ ...

angulartypescript

Ensuring my website doesn't load within an iframe using PHP

I attempted to prevent my site from loading in other locations, but unfortunately, my efforts were unsuccessful even after using the following code. <?php header(X-Frame-Options: allow-from https://example.com); header(X-Frame-Options: deny); ?> Is ...

phphtmlhttp

The attribute 'use' is not found within the data type 'typeof...', and the property 'extend' is not present within the data type 'typeof'

As I embark on building my very first Vue app using TypeScript, I find myself facing a frustrating issue: Property 'xxx' does not exist on type 'typeof. Despite my efforts to research similar problems, none of the suggested solutions have pr ...

typescriptvue.js

What is the best way to prevent users from entering a zero in the first position of a text box using JavaScript

Although I am aware this may be a duplicate issue, the existing solution does not seem to work for me. The field should accept values like: valid - 123,33.00, 100,897,99, 8000 10334 9800,564,88.36 invalid - 001, 0 ...

javascriptregexangulartypescript

Transforming two child arrays within an object into a single array using Ramda

I am looking to transform an object into an array. The object I have is structured like this: const data = { t1: [ {"a": 1, "a1": 2}, {"b": 3, "b1": 4}, {"c": 5, "c1": 6} ], t2: [ {" ...

javascriptarraysjsontypescriptramda.js

Display a modal dialogue with an image on the initial page load for each user

Working on a project with Angular 11, Angular material, and Bootstrap, I encountered an issue. I want to display a popup ad the first time a user visits the home page. The modal dialog is created using Angular material, and I have it in the ads component, ...

javascriptangulartypescriptangular-material

Adding connected types to a list using Typescript

Question regarding Typescript fundamentals. In my code, I have a list that combines two types using the & operator. Here is how it's initialized: let objects: (Object & number)[] = []; I'm unsure how to add values to this list. I attem ...

typescript

Angular 9 library compilation issue: Module unused warning detected

After upgrading my project from Angular 8 to Angular 9, I encountered a warning when trying to build the library: The '__read' is imported from external module 'tslib', but never used https://i.stack.imgur.com/Xg4Eu.png This warning ...

angularangular9angular-libraryng-packagr

Retrieve an item from the Ionic Firebase database

My current challenge is retrieving data from the Firebase database. user-service.ts getProfile(){ try {; return this.afDatabse.object(`profile/${this.afAuth.auth.currentUser.uid}`); } catch (e) { console.log(e); } } c ...

javascripthtmlangularfirebaseionic-framework

Invoke a bounded function within an Angular directive using the ng-click event

I was wondering if it's possible to invoke a bound function within a directive by clicking on a specific part of a div. Currently, I have a div with an inner div that acts as a button for expanding the main div. The larger div has a directive associat ...

javascripthtmlangularjsdom

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

https://i.stack.imgur.com/vAJv2.png This particular challenge involves creating a responsive mobile menu. In this design, the width of all children is determined by the longest child element. The CSS should ensure that the .index class spans the full wi ...

htmlcssflexboxresponsive

Can you provide some guidance on utilizing a for loop within Angular?

Storing the values entered by the user in an input field as "values" and having another array, "existing userdetails," returned from the backend that contains all details of existing users, I am faced with the task of comparing these two sets of data. I h ...

angulartypescriptfor-loop

Is it possible to automatically open the Tinymce Comments sidebar without the need for a manual button click?

After successfully implementing the Tinymce comments plugin into our configuration, we have come across a request from our users. They would like the 'showcomments' button to automatically trigger on page load, displaying the sidebar containing t ...

typescripttinymcetinymce-5tinymce-plugins

Executing a function for every element within a loop in Angular 11 - the Angular way

I'm currently developing a project using Angular in which users have the ability to upload multiple questions simultaneously. After adding the questions, they are displayed in a separate modal where users can include diagrams or figures for each quest ...

arraysreactjsangulartypescriptfrontend

The pre-line white-space property is not functioning as anticipated in my CSS code

content: string; this.content = "There was an issue processing your request. Please try using the browser back button."; .content{ white-space: pre-line; } <div class="card-body text-center"> <span class="content"> {{ content }} </span& ...

htmlcssangulartypescript

Bootstrapvalidator does not function properly with select2.js

My code is not validating the select field. What could be causing this issue? Can anyone provide a solution? Apologies for my poor English, and thank you in advance for your response. Here is my form: <form name="form_tambah" class="form_tambah"> ...

javascripthtmltwitter-bootstrapcodeigniter

My worker threads seem to be flying under the radar

Currently, I am working on implementing worker threads into my Node.js/Typescript application. I have made significant progress, but it appears that my worker threads are not being executed as expected. Despite adding loggers inside the function intended f ...

node.jstypescriptmultithreading

Combining two forms into one PHP page, but intending to submit only a single form

I'm facing an issue on my page where I have both a sign-in and a sign-up form. Whenever I click on either the sign-in or sign-up button, it always ends up submitting the sign-up form. What am I doing wrong? Here's the PHP code snippet: if($_SE ...

javascriptphphtmlajaxforms

Issues with path in ngx-cookie-service while using Angular 9

I'm currently utilizing the ngx-cookie-service package to store important data for my application. It is crucial for me to save this cookie on the base path '/' so that I can easily retrieve it when needed. The cookie requires periodic updat ...

angularcookiessetcookieangular-cookiesngx-cookie-service