Dynamic control binding to render on the screen by changing it constantly

I am struggling to create a dynamic form where the dropdown selection (control2) changes based on what is entered in a text box (control1). My goal is that when a user inputs a value into control1, I want control2 to display a specific string corresponding to that value, along with the option 'Date'. The dropdown should only have two values: 'Selected' and 'Date'. If the user enters an incorrect value in control1, the dropdown should display 'Selected' and reset the value of control2. However, I seem to be facing difficulties in displaying both 'Date' and 'Selected' options in the dropdown while updating control2 accordingly. Can someone please help me with this?

Form setup:

form: FormGroup = this.fb.group({
  control1: (null),
  control2: {value: null, disabled: true}
})

Function to check valid text entry:

validControl(): boolean {
  if(this.control1.value !== null && this.control1.value !== ''
&& this.control1.valid) {
    return true;
}
else {
  return false;
}

Take a look at this stackblitz demo for a visual representation:

In summary, here is what I aim to achieve:

  • User enters a valid value in the text box (control1)
  • The dropdown displays 'Date' and binds 'EDTEV' to control2
  • If the user deletes the text in control1, the dropdown shows 'Selected' and resets the value in control2
angulartypescriptangular-reactive-forms

Answer №1

After reviewing the question, here are some suggestions that might be helpful:

  1. Change 'control3' to 'control1' in the *ngIf condition
  2. Adjust the *ngIf conditions based on your specific requirements (e.g., updating the check when no value is entered or something is input)

These changes were made in the app.component.html file only.

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<form [formGroup]="form">
  <input type="text" formControlName="control1"><br><br>
  <select formControlName="control3">
    <ng-container *ngIf="form.get('control1').value">
    <option *ngFor="let items of response" [value]="items.code">{{items.description}}</option>
    </ng-container>
    <ng-container *ngIf="!form.get('control1').value">
    <option>SELECTED</option>
    </ng-container>
  </select>
</form><br>

<button (click)="test()">TEST</button>

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

Ensure that a variable adheres to the standards of a proper HTML template

I'm struggling with a problem in my Angular application. I need to ensure that a TypeScript variable is a valid HTML template to compile successfully, like this: let v = '<div>bla…</div>' However, if the variable contains inco ...

angulartypescriptangular-builder

Update the component to display the latest information from the Bryntum grid table

In the Vue component, I have integrated a Bryntum grid table along with a bar chart. Clicking on one of the bars in the chart should update the data displayed in the Bryntum grid table. However, I've encountered difficulty in reloading the entire Bryn ...

typescriptvue.jsvue-componentbryntum-grid

Error: The function type 'Dispatch<SetStateAction<string>>' cannot be assigned to the type '(value: OptionValue) => void'

I recently dove into the world of integrating Typescript generics with React after reading this insightful article. I followed the code provided in the article, but encountered the following error: Type 'Dispatch<SetStateAction<string>>&ap ...

reactjstypescripttsx

Choose a single asset from the list of values stored in the Map

I'm looking to implement something similar to the following: let myMap = new Map<string, any>(); myMap.set("aaa", {a: 1, b: 2, c:3}); myMap.set("bbb", {a: 1, b: 2, c:6}); myMap.set("ccc", {a: 1, b: 2, c:9}); let cs = myMap.values().map(x => ...

javascripttypescriptdictionary

What could be causing input to be blocked in certain situations while using my Angular directive with compile function?

Recently, I created a directive that adds a class based on a certain condition. You can find the code snippet at the end of this question. The directive functions as expected in a simple use case where it's applied to a required field: <input typ ...

javascriptangularjstypescriptangularjs-directive

Displaying boolean and timestamp values within a react-table component is made easy with React Table, React, and Typescript

I'm facing an issue with printing the boolean and timestamp values retrieved from a specific API. Unfortunately, I have been unsuccessful in achieving this task. Any assistance on how to resolve this would be highly appreciated. Here is the column co ...

reactjstypescriptreact-table

"Encountering problem when configuring DataSourcePaginator as the primary Paginator component in Angular

I'm currently working on setting up a table with materials but I've run into an issue while trying to implement pagination. Specifically, in the AfterViewInit stage, I encountered errors when assigning this.dataSource.paginator = this.paginator; ...

angularangular-material

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

I'm currently working towards integrating the steelseries.js library (found at https://github.com/HanSolo/SteelSeries-Canvas) into a Grafana plugin built with React. It's quite a complex task, but I'm up for the challenge. Right now, my ma ...

javascripttypescriptgrafanaiife

Identify modifications to properties in Angular

What is the most effective method for responding to property changes within a component? I am seeking a solution that will trigger a specific function every time a property in a component is altered. Consider the following example with a single component: ...

javascriptangulartypescript

Revamping every Angular component

Looking for a shortcut to upgrade all my Angular components at once. When checking my Angular version with ng v globally in VS Code terminal, results differ between overall and project directory settings: https://i.stack.imgur.com/2iOJx.png https://i.st ...

angularnpm

Understanding toastr Angular's explanation of the ExpressionChangedAfterItHasBeenCheckedErrorToastr Angular's

I have encountered some errors recently, particularly when a toast is automatically created upon loading. It appears that this issue arises because not all components are loaded at the same time. Error: ExpressionChangedAfterItHasBeenCheckedError: Expres ...

javascriptangulartoastr

Using the Markdown attribute in this context prevents the translate pipe from translating the string

I have a paragraph within an Angular component that includes a markdown attribute. Occasionally, the markdown is causing the translation pipe to not translate the title.description string: <p class="someClass" markdown>{{tile.description | ...

htmlangularmarkdownngx-translate

You must incorporate the formControlName within a parent formGroup directive to proceed. Ensure to include a formGroup in order to resolve this error

As a beginner in angular 8, I am currently facing the challenge of migrating an old project from angular JS to angular. Everything was going smoothly until I encountered the infamous error stating that formControlName must be used with a parent formGroup d ...

angular

I am able to view the node-express server response, but unfortunately I am unable to effectively utilize it within my Angular2 promise

https://i.stack.imgur.com/d3Kqu.jpghttps://i.stack.imgur.com/XMtPr.jpgAfter receiving the object from the server response, I can view it in the network tab of Google Chrome Dev Tools. module.exports = (req, res) => { var obj = { name: "Thabo", ...

node.jsangularexpresstypescriptes6-promise

Steps to create a fixed pattern background image with a customizable background color based on the content within a div element

I am seeking guidance on how to create a single page application using Angular that features a fixed background image (such as a white pattern) in the BODY tag. However, I would like the ability to change the color behind this image depending on the conten ...

cssangular

Can a type be referenced using the generic name?

My selection includes: export type DocumentType = | Item | List | User export type DocumentInputType = | ItemInputType | ListInputType | UserInputType I want to develop a feature that can determine the input type based on the document type wi ...

typescript

Error encountered in jquery.d.ts file: Unresolved syntax issue

I am currently in the process of transitioning my jQuery project into a Typescript project. I encountered an issue when attempting to include the jQuery typings from the DefinitelyTyped Github by using the following method: ///<reference path="../../ty ...

javascriptjquerytypescriptwebstormtypescript-typings

Named outlets cannot be routed in Angular 11

Our application features 2 tabs, each equipped with its own designated outlet <mat-tab-group> <mat-tab label="Tab1"> <router-outlet name="tab1"></router-outlet> </mat-tab> <mat-tab la ...

angularroutes

Issue with mediaelement in Angular 8: video playback does not display after 2 seconds

I'm encountering an issue with MediaElement js when trying to play videos in .m3u8 format within a slider containing multiple videos. Whenever I click on the play button for any video, only a 2-second clip is shown before the video disappears. Any as ...

javascriptangularmediaelementmediaelement.js

Exploring the depths of useDispatch and dispatch in React-Redux

I am currently analyzing the code written by a former colleague of mine. Based on my understanding, useDispatch accepts an object containing the action type and payload, which is then compared to all reducers to update the state accordingly. However, in t ...

reactjstypescriptreduxreact-hooks