Steps to allow an ng-model to accept a variety of input values

Imagine having an input box structured like this

<ion-input [(ngModel)]="Gender" type="text" placeholder="Gender Type"></ion-input>
<ion-input [(ngModel)]="hairCat" type="text" placeholder="Hair Type"></ion-input>

Now, let's take another textbox with the same structure

<ion-input [(ngModel)]="Gender" type="text" placeholder="Gender Type"></ion-input>
<ion-input [(ngModel)]="hairCat" type="text" placeholder="Hair Type"></ion-input>

The goal is to allow the inputs to accept multiple values simultaneously.

For instance:

[Boy Girl][black brown]

To elaborate further, suppose we have a predefined textbox like this

<ion-input type="text" readonly [(ngModel)]="values" value="adp"></ion-input>
 <ion-input type="number" placeholder="Total Votes" name="vote" [(ngModel)]="vote"></ion-input>   

 <ion-input type="text" readonly   [(ngModel)]="values"  value="lp"></ion-input>
  <ion-input type="number" placeholder="Total Votes" name="vote" [(ngModel)]="vote"></ion-input>

We have:

value Vote adp
lp

Here, the value is predefined while the vote will be entered by the user.

How can we modify them to accept diverse values?

angulartypescriptionic2

Answer №1

When you bind two inputs to the same object, they will share the same value.

To fix this issue, update the ngModel bindings in the second text box like so: 

[(ngModel)]="hairCat2" [(ngModel)]="Gender2"
.

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

Ways to retrieve class attributes in a child context

When trying to access the class properties (or methods) from another scope, I find myself having to store it in a local variable within the function scope. class MyClass { constructor(API) { this.API = API; this.property = 'value& ...

javascripttypescriptecmascript-6

Alias route for `src` in Ionic 3

I have set up a custom webpack configuration for Ionic 3 in order to use src as a path alias (meaning I can import from src/module/file): resolve: { alias: { 'src': path.resolve('./src') } } However, after updating to Ionic ap ...

angulartypescriptionic-frameworkwebpack

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Can TypeScript Implement a Dictionary Feature Similar to C#?

Looking for guidance on how to use TypeScript interface to define these C# models: public class PageModel { public long Id { get; set; } public string Name { get; set; } public IDictionary<string, FieldModel> Fields { get; set; } } pu ...

dictionarytypescript

Issue encountered while attempting to utilize the useRef function on a webpage

Is it possible to use the useRef() and componentDidMount() in combination to automatically focus on an input field when a page loads? Below is the code snippet for the page: import React, { Component, useState, useEffect } from "react"; import st ...

reactjstypescriptnext.js

Using Typescript to implement an onclick function in a React JS component

In my React JS application, I am using the following code: <button onClick={tes} type="button">click</button> This is the tes function that I'm utilizing: const tes = (id: string) => { console.log(id) } When hovering ov ...

javascriptreactjstypescript

Navigating with Angular 7

Encountering an issue with my Angular 7 Application Here is the error message: Error: Invalid configuration of route 'dashboard'. One of the following must be provided: component, redirectTo, children or loadChildren In the process of develo ...

angularangular-materialangular-routing

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

Within my VS Code workspace, I am using the Typescript language and would like to format my comments across multiple lines with a specific style (look out for the star character) /** *@desc any text * any text */ However, when I attempt to write a comm ...

javascripttypescriptvisual-studio-code

The interaction between Nextjs router and useEffect resulting in unintended re-rendering

I'm currently facing a challenge with Next.js's next/navigation router. In my component, I have a series of useEffects implemented. Strangely, when I call router.replace, one of the effects runs twice or even infinitely in some cases. As a result ...

reactjstypescriptnext.jsreact-hooks

Having trouble retrieving a value from a reference object in React Typescript?

Struggling with a login form issue in my React TypeScript project. Below is the code for the react login form: login-form.tsx import * as React from 'react'; import { Button, FormGroup, Input, Label } from 'reactstrap' ...

reactjstypescript

What is the purpose of adding "/dist" to the library import statement?

Currently, I am in the process of developing a react component library using vite as my primary build tool. After successfully compiling the project and deploying it to the npm registry, I encountered an issue when importing it into my client app. Specifi ...

javascriptreactjstypescriptnpmvite

Avoid retrieving information from Firestore

Hey everyone, I'm struggling to figure out why I can't retrieve data from Firestore. Even after carefully reading the documentation and double-checking the path, I still can't seem to make it work. I'm working with Ionic framework. getC ...

angulartypescriptionic-frameworkgoogle-cloud-firestorechat

Ionic - Retrieve data from a Universal Resource Identifier

When using my application, users have the option to select and crop images using Ionic Native - Crop. Once they have cropped their image, I will receive the URI of the image, for example: file:///storage/emulated/0/Android/data/com.myApp/cache/15353694789 ...

javascriptangulartypescriptionic-frameworkuri

After updating Jest, encountering an error when trying to access the 'html' property of an undefined value

In upgrading jest to version 28 for my angular v12 project, I encountered an error after the update: FAIL src/app/components/update-input/update-input.directive.spec.ts ● Test suite failed to run TypeError: Cannot read property 'html' of un ...

angularjestjs

Child routes in Angular tabs are failing to display in the currently active tab

Hey there! I'm currently working on navigating my Angular application using tabs, and I've run into a bit of an issue with the child routes. Specifically, when I switch to the second child route within the second tab, the status of the tab change ...

angularroutesparent-child

Updating documents within an array in MongoDB is a common task that can be easily accomplished

Trying to modify a specific property within my MongoDB document. This is how the document is structured: "_id" : ObjectId("57e2645e11c979157400046e"), "id" : 1651570992420, "creator" : "nameHere ...

node.jstypescriptmongodb

Why does my array seem to update only once in the view?

I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...

htmlarraysangulartypescriptsorting

The error message "Type 'string' cannot be assigned to type 'Condition<UserObj>' while attempting to create a mongoose query by ID" is indicating a type mismatch issue

One of the API routes in Next has been causing some issues. Here is the code: import {NextApiRequest, NextApiResponse} from "next"; import dbConnect from "../../utils/dbConnect"; import {UserModel} from "../../models/user"; e ...

mongodbtypescriptmongoosenext.js

Using both Angular material design and Bootstrap together can provide a seamless

Is it feasible to integrate material design into an Angular app alongside bootstrap without any complications? I am aiming to leverage the grid system of twitter-bootstrap and incorporate the dialogues from material design... ...

twitter-bootstrapangularangular-material2

What is preventing me from loading a module using a variable containing a string?

This code snippet demonstrates how the module can be successfully loaded using import('test'), but not with the second example. These lines of code are executed within an Angular 9 application utilizing the default Webpack configuration. var tes ...

javascriptangularmodule