Touched the Force of ngModel

I am looking to make the required fields show in red in the angular material when the "Submit" button is clicked. To achieve this, I need to trigger the input to be marked as touched.

                <div class="formRow">
                    <mat-form-field class="profile-field" style="width: 40%" appearance="outline">
                        <input required #personalInfoFirstName 
                                class="profile-input" matInput
                               placeholder="firstname" name="firstName"
                               [(ngModel)]="firstName" #tst="ngModel">
                    </mat-form-field>
                </div>
                <div>touched = {{tst.touched}}</div>

Is there a way to force touch (tst.touched) on a [(ngModel)]?

angulartypescriptvalidationinputrequired

Answer №1

When you want to manipulate #tst, simply call tst.control.markAsTouched() to update its status.

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

The presence of a setupProxy file in a Create React App (CRA) project causes issues with the starting of react-scripts,

I have implemented the setupProxy file as outlined in the documentation: const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/address', proxy({ target: 'http ...

reactjstypescriptproxycreate-react-app

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

javascriptreactjstypescript

What is the best way to implement Angular 2 slash routes in conjunction with Node Express?

I have defined some routes in my App component: @routeConfig([ { path:'login', name: 'Login', component: Login }} Additionally, I have a basic node express loader set up: var express = require('express'); var ...

javascriptexpressangular

Issue downloading file in Angular using Filesaver.js is causing problems

I am utilizing Filesaver.js to attempt downloading files from my Express (NodeJS) backend. Below is the backend code responsible for file downloads. It incorporates a middleware to authenticate the request. res.download(url, function (err) { if (err) ...

node.jsangularexpressdownloadfilesaver.js

Retrieving User's Theme Preference from Local Storage in Next.js Instantly

As mentioned in various other responses, such as this one, Next.js operates on both the client and server side, requiring a guard to properly fetch from localStorage: if (typeof localStorage !== "undefined") { return localStorage.getItem("theme") } else ...

reactjstypescriptnext.jslocal-storage

Function Type Mapping

I am in the process of creating a function type that is based on an existing utility type defining a mapping between keys and types: type TypeMap = { a: A; b: B; } The goal is to construct a multi-signature function type where the key is used as a ...

typescript

The subscription function in observables may result in values that are undefined

I integrated a new angular 2 library into my application called "angular2-grid". This library is located within the node_modules folder. Furthermore, I created a service as shown below: import { Injectable } from '@angular/core'; import { Htt ...

angulartypescriptobservable

What is the best way to incorporate CSS from node_modules into Vite for production?

I have a TypeScript web application where I need to include CSS files from NPM dependencies in index.html. Here is an example of how it is done: <link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css&quo ...

csstypescriptnpmvite

Creating a DynamoDB table and adding an item using CDK in Typescript

Can anyone guide me on how to add items to a Dynamodb Table using CDK and Typescript? I have figured out the partition/sort keys creation, but I am struggling to find a straightforward solution for adding items or attributes to those items. Additionally, ...

typescriptamazon-web-servicesamazon-dynamodbaws-cdk

The animation fails to retain its final state and reverts back to its initial state

Currently, I am diving into learning Angular 6 and encountered a small issue. Following this tutorial: Upon clicking the button, the animation executes as intended. However, after the fade-out effect, the text reappears abruptly. Any insights on why it re ...

angularangular-animations

Generate an observable by utilizing a component method which is triggered as an event handler

My current component setup looks like this: @Component({ template: ` ... <child-component (childEvent)="onChildEvent()"></child-component> ` }) export class ParentComponent { onChildEvent() { ... } } I am aiming to ...

angulartypescriptrxjsobservable

Struggling to maintain consistent updates on a child element while using the @Input property

I need to ensure that the data source in loans.component.ts is updated whenever a new loan is submitted from loan-form.component.ts. Therefore, in loan-form.component.ts, I have the following function being called when the form is submitted: onSubmit() { ...

angulartypescript

Modifying Angular 4 instance field in the code does not update the template as expected

One issue I am encountering is that changes in the instance variable in my component class are not automatically reflected in my template file unless I explicitly call ref.detectChanges The method signInWithGoogle in my auth service is called from the com ...

angulartypescriptrxjs

Align item in center of remaining space within container using Material-UI React

I am relatively new to MUI and styling HTML components, and I have a query. I'm currently utilizing the Grid feature in my React project. My goal is to achieve something similar to this (image edited in Paint, alignment may not be accurate): https://i ...

reactjstypescriptmaterial-uivite

Trouble with Angular2: Socket.io event not refreshing the view

I attempted to update my view upon receiving a socket event. This is what my component code looks like: constructor(private _zone: NgZone){ this.socket = io.connect('http://localhost:3000'); this.socket.on('someEvent', function ...

angularjsangulartypescriptwebsocketsocket.io

Parsing of the module failed due to an unexpected character appearing when trying to insert a TTF file into the stylesheet

As a newcomer to Angular, I recently completed the tutorial and am now working on my first app. While trying to add an OTF file, everything went smoothly. However, when I made a change to my app.component.css file and included this code snippet: @font-fa ...

javascriptcssangulartruetype

What is the method for identifying the corresponding value that should be linked to the remaining select based on the selected option?

Is it possible for the first select to dynamically affect the value of another select? <form [formGroup]="myForm"> <div class="modal-body"> <p><strong>Rate:</strong></p> {{ApplesPerCash}} <p><st ...

angular

Validating dates with JavaScript from the start date to the end date

I need to validate the from and to date fields using the date format d/m/Y H:i. This is what my code looks like: var startDate = new Date($('#fromdate').val()); var endDate = new Date($('#todate').val()); if (endDate.getTi ...

javascriptjqueryvalidationdatetime

NPM is encountering difficulties resolving the dependency tree

This query has already been asked before. I have attempted to execute various commands like npm i, npm install, npm update and more on this project that I pulled from a private git repository. Unfortunately, none of them seem to work. I even tried deleting ...

node.jsangularnpm

Using selectors and mappers in Typescript generics

I am looking to create a versatile selector and mapper method. interface State { user: { name: string; age: number; } } const pickName = (state: State) => state.user.name; const selectAge = (state: State) => state.user.age; ...

typescripttypestypescript-generics