Angular 2: A guide to resetting dropdown and text values when changing radio button selections

When the user interface displays two radio buttons - one for YES and one for NO - and the user clicks on YES, a dropdown is shown. Conversely, if the user clicks on NO, a textbox is displayed. How can I clear the values in the dropdown and textbox when switching between radio buttons? Currently, both the textbox and dropdown retain their previous values when switching. Any assistance would be greatly appreciated.

<div id="radio" class="row">Are you an existing client?</p>

         <div class="form-check form-check-inline">
             <label class="form-check-label">
                <input type="radio" [(ngModel)]="radioValue" value="yes"/>yes
             </label>
         </div>

         <div class="form-check form-check-inline">
                <label class="form-check-label">
                <input type="radio" [(ngModel)]="radioValue" value="no"/>no
                </label>
         </div>
         </div>

      <label *ngIf="radioValue == 'yes'">Select Client</label>
             <select #select [(ngModel)]="cuurent" (change)=logDropdown(select.value) class="form-control input-group" 
                 *ngIf="radioValue == 'yes'">
                <option *ngFor="let item of list" [value]="item.id">{{item.name}}</option>
            </select>

         <div class="form-group">
            <label  *ngIf="radioValue == 'no'">Enter Client</label>  
            <input type="text" [(ngModel)]="inputsic" class="form-control input-group" *ngIf="radioValue == 'no'" />
         </div>
          </div>

Answer №1

<input type="checkbox" [(ngModel)]="checkBoxValue" (ngModelChange)="clearSelection()" value="agree"/>agree
<input type="checkbox" [(ngModel)]="checkBoxValue" (ngModelChange)="clearSelection()" value="disagree"/>disagree
clearSelection() {
  this.choiceSelected = '';
  this.currentChoice = null;
}

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

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

What could be the reason for the malfunctioning of the basic angular routing animation

I implemented a basic routing Angular animation, but I'm encountering issues where it's not functioning as expected. The animation definition is located in app.component.ts with <router-outlet></router-outlet> and two links that shoul ...

Steps for incorporating an icon into a datagrid in ReactJS

I'm looking to enhance my datagrid by incorporating icons in a specific column, particularly the 'Role' column. However, I'm unsure of the feasibility and implementation process within a datagrid. Despite scouring the web for solutions, ...

Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the active state? <v-list> <v-list-item-group v-model="day" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-content& ...

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

"Using TypeScript: How to effectively wait for the completion of the array.sort

Need to implement a loading screen in Angular until an array is sorted. Solution provided below: this.isSorting = true; this.array = this.array.sort((a,b) => a.totlaTime - b.totalTime); this.isSorting = false; The issue faced is when isSorting is set t ...

Exploring the Dynamic Display of Nested JSON Objects in Angular 6

Struggling with a complex issue and feeling lost on how to approach it. I'm currently working with Angular 6. The challenge at hand involves handling JSON data in my project. While accessing simple data like "id" or "certificate" is easy, I'm en ...

How to Set a Button as Inline Text in a React Native Component

Below is the code snippet I am working with utilizing the Text and Button components provided by react-native-paper: <Text>See also </Text> <Button mode="text" compact onPress={this.nav( name )}>Compass</Button> <Text&g ...

How to successfully utilize TypeScript ES6 modules and RequireJS for registering Angular elements

I am in the process of updating a current Angular application that uses AMD with TypeScript 1.5 ES6 module syntax. Our modules are currently stored in separate files, and the main "app" module is defined like this... define('app', ['angular ...

Challenges encountered when unit testing ngx-translate

0 I am encountering issues with unit testing while using the ngx-translate library. Despite adding a provider for TranslateService, the tests keep asking for more providers, creating an endless loop of dependencies. Specifically, I am trying to unit test ...

javascript show and hide navigation bar

I am currently working on a HTML menu that includes a button to open it and an unordered list : <nav class="menu"> <button> <h1>Menu</h1> </button> <ul class="mylist" ...

Login with Twitter integrating Angular

Attempting to integrate signin functionality using angular2, I have read from the official documentation as well here. However, I am struggling to understand the flow. Here are my questions: What parameters are needed to access the first step, i.e., oaut ...

How to pass a String Array to a String literal in JavaScript

I need to pass an array of string values to a string literal in the following way Code : var arr = ['1','2556','3','4','5']; ... ... var output = ` <scr`+`ipt> window.stringArray = [`+ arr +`] & ...

Dynamically render a nested component, created within the parent component, using a directive

Can a nested component be dynamically rendered as a directive within the parent component? Instead of using the standard approach like this: <svg> <svg:g skick-back-drop-item /> </svg> where "skick-back-drop-item" is the s ...

Retrieve the matrix3d values from the -webkit-transform property

My current endeavor involves rendering 3D shapes using the <canvas> (2d context), requiring manual projective transformations. I am eager to retrieve the 3D transformation matrix values from the CSS, as that would greatly aid my process. Is it poss ...

The key is not applicable for indexing the type as expected

Here is the TS code I am working with: type Fruit = { kind: "apple" } | { kind: "grape"; color: "green" | "black" }; type FruitTaste<TFruit extends Fruit> = TFruit["kind"] extends "apple" ? "good" : TFruit["color"] extends "green" ? "good" : ...

The length of the LinearProgress bar does not match the length of the navbar

Utilizing the LinearProgress component from Material UI, I created a customized ColoredLinearProgress to alter its color: import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import { LinearP ...

Using clip-path in SVG works perfectly on images, but unfortunately it does not work on div

I came across an interesting example on MDN about using a clip-path SVG on an image. However, it seems that the same clip-path does not work properly when applied to a div. Can anyone shed some light on: The reason why this code is not achieving the inte ...

Which option offers superior performance: using attributes through HTML or jQuery?

At times, I find myself needing to include special classes, divs, and attributes in my HTML code for jQuery scripts to function properly (the site's "no-JavaScript" version doesn't require these elements). You probably understand what I mean. I& ...

What are some tips to speed up image loading times?

Is there a way to optimize the loading speed of these images? In my loop that displays profile pictures, the photos take between 1 to 2.5 seconds to load all at once. I attempted resizing with PHP, but it had minimal impact on the load time. How can I prel ...