The mandatory input field property is malfunctioning, and the color of the input field remains unchanged

   <div class="container">
      <h1>Register Form</h1>
        <form>
        <div class="form-group" >
          <label for="name">Full Name</label>
          <input type="text" class="form-control" [ngClass]="{'red-border':user.name.errors}" [(ngModel)]="user.name" [ngModelOptions]="{standalone: true}" id="name" required >
        </div>
        <div class="form-group">
            <label for="pass">Password</label>
            <input type="password" class="form-control"   id="pass"  [(ngModel)]="user.pass" [ngModelOptions]="{standalone: true}">
        </div>
        <div class="form-group">
              <label for="cpass">Confirm Password</label>
              <input type="password" class="form-control"  id="cpass "required [(ngModel)]="user.cpass" [ngModelOptions]="{standalone: true}">
        </div>
        <div class="form-group">
            <label for="dob">Date of Birth</label>
            <input type="date" class="form-control" id="dob" required [(ngModel)]="user.dob"[ngModelOptions]="{standalone: true}">
        </div>
        <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" class="form-control" id="email" required [(ngModel)]="user.email" [ngModelOptions]="{standalone: true}">
        </div>
        <div class="form-group">
            <label for="contact">Contact Number</label>
            <input type="text" class="form-control" id="contact" required [(ngModel)]="user.contact" [ngModelOptions]="{standalone: true}">
        </div>
        <button type="button"  (click)="validateUser(user)" class="btn btn-success" >Submit</button>
      </form>
    </div>

Exploring Angular 2 and trying to implement validation with the required property in input tag, but facing issues. Looking to change input color on error detection. Your insights are appreciated! Here is the current code snippet.

Answer №1

Assign a title to your input area such as title="name" and then experiment with using this code user.title.errors.required in place of user.name.errors

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

Is there a way to position a heart-shaped animation element on the top right corner of a Bootstrap card image?

I am looking to incorporate an animation in the upper right corner of the bootstrap image, but I'm unsure about how to go about it. Here is the concept I have in mind: https://i.sstatic.net/rIvky.jpg Specifically, I'd like to include a heart an ...

Customize a Bootstrap 4 card-deck layout to adjust the number of columns based on the viewport

I am currently working on implementing the card-deck feature in Bootstrap 4 to ensure that all my cards have the same height. Although the examples provided by Bootstrap showcase 4 stylish cards, they are always displayed as 4 cards per row, regardless of ...

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

Utilize jQuery to extract URL parameters and incorporate them into a script

I have a unique link: http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4 The values can vary, meaning the parameters are not fixed. My example includes 4 parameters, but there could be more ...

Tips on using a dropdown menu to choose an item and automatically navigate to its specific details within an Angular framework

Here is the structure of my data : groups: [ { collections:[] }, { collections:[] }] I am utilizing nested *ngFor to showcase all groups and collections on a single page, which can make the list lengthy as more groups and collections are added. The hea ...

The requested resource at / could not be found on the server

Currently, I am in the process of developing a webpage that utilizes Angular to dynamically alter DOM elements. The project includes a public folder housing HTML, CSS, JavaScript, and JSON files. To share the project, I have set up Node to run it from loca ...

Is there a way to create HTML code from a portion of my Angular2 template?

I am looking for a way to enable my users to easily copy and paste the HTML output of a component template into platforms like MailChimp or their personal website. Similar to how some websites have buttons to generate embeddable iframe codes, I want to pro ...

Encountering a Compilation Issue in Angular 4

After executing npm install bootstrap@next in my new Angular project, I encountered a compilation error. As a beginner with Angular, I'm seeking assistance on this issue. Compilation Error: ./node_modules/ansi-html/index.js Module build failed: ...

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

"Encountered an issue while attempting to scrape data from Rotten Tomatoes website

One of my tasks is to extract information from a webpage on Rotten Tomatoes. This is the screenshot of the page https://i.sstatic.net/i3gwp.png Based on the image, it seems that span class= descriptor is the parent class of a class, and div class = info ...

The o-gradient feature is not compatible with Mac and Linux operating systems

Hello there! I am facing an issue with creating a gradient on my website without using an image. Surprisingly, the gradient appears on Windows but not on Mac or Linux operating systems. Any idea why this might be happening? You can check out the website he ...

Troubleshooting: Issue with jQuery not retrieving the value of input:nth-child(n)

My goal is to dynamically change the price when the model number changes, requiring the id number and quantity to calculate it accurately. Here is the HTML code I have: <div class="col-sm-9 topnav"> <span> ...

What is the best approach to create an isLoggedIn function using Angular Firebase?

Implementing an isLoggedIn method using Firebase in my Angular 6 app has been a challenge. The firebase user object behaves like a "subscription" object, making it difficult to use as a regular method. This is my current implementation: export class Angu ...

"Upon refreshing the Angular app, the index.html file is not loaded

My angular.js application has a basic setup where the index.html file renders static content like Top/Sidebar. Inside, there is a <div ng-view></div> to display partial html files such as home.html. Upon logging into the application, both the ...

Setting up Angular 2 application on Apache server

I just recently delved into the world of Angular 2 and successfully created my first demo angular application. I now want to make it accessible from anywhere by deploying it on a server. Following the instructions, I generated a build (dist) using the com ...

Providing Access to Data Across Various Modules

I currently have an application structured like this: AppModule SubModule Multiple Components SecondSubModule Multiple Components I am looking to perform a data call to a REST API that will be used by both SubModule and SecondSubM ...

Add a unique stylesheet for a particular page by including it in the header.php file

I have set up a simple php template for the different pages on my website, where each index.php file includes a header.php, footer.php, and so on. There is a specific situation where I want to add an extra set of styles for just one section of the site, an ...

Is it possible to reduce the number of calls to ngAfterContentChecked() and ngAfterViewChecked() instead of calling them repeatedly?

`ngAfterContentChecked() { console.log("Content has been checked"); } ngAfterViewChecked(){ console.log("View has been checked"); }` I am currently developing an Angular project where I need to execute a set of statements twice on a page - ...

Tips for finalizing a subscriber after a for loop finishes?

When you send a GET request to , you will receive the repositories owned by the user benawad. However, GitHub limits the number of repositories returned to 30. The user benawad currently has 246 repositories as of today (14/08/2021). In order to workarou ...

Undefined boolean when passing to AngularJS directive

I developed a custom directive that allows for the addition of a gradient background color in AngularJS: .directive('colouredTile', function () { return { restrict: 'A', controller: 'ColouredTileController&apos ...