I have a form where the last name field is initially disabled. How can I make it so that the last name field becomes enabled only when the first name is inputted?
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" disabled>
</form>
Here is a suggestion to try:
app.component.ts
person: any = {
firstName: '',
lastName: ''
};
app.component.html
<form name="myForm" #formDemo="ngForm">
<label for="firstName">First Name:</label><br>
<input type="text" id="firstName" class="form-control" #firstName="ngModel" [(ngModel)]="person.firstName" name="firstName" required/><br>
<label for="lastName">Last Name:</label><br>
<input type="text" id="lastName" class="form-control" [(ngModel)]="person.lastName" name="lastName" [attr.disabled]="firstName.hasError('required') ? true : null" required/><br>
</form>
Take a look at this interactive demo:
function enableLastNameField(input) {
if(input.value.length > 0){
$("#lname").removeAttr("disabled");
}
else{
$("#lname").attr("disabled", 'disabled');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" onkeyup="enableLastNameField(this)"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" disabled>
</form>After completing a small Angular 2 project, I compared my work with the provided code and realized that in the app.module.ts file, only one of the two services I created was included by the tutor. users.service.ts import { Component, Injectable } fro ...
I am experiencing difficulty in creating a line break using \r\n with the given payload on this particular screen. I am on a quest to determine the correct json payload that needs to be dispatched to the frontend in order for it to register as a ...
Currently, in my angular 10 application, I am utilizing a library called svg.js to generate an SVG within the client. However, the specific library I am using is irrelevant for the question at hand. let svg = SVG().size(this.widthpx, this.heightpx).svg ...
In my component, I have the following setup: constructor() { this.something = "Hello"; } document.addEventListener('click', doSomething()); function doSomething(e) { console.log(this.something) // this is undefined } I am struggling to a ...
I am currently struggling with converting the received ArrayBuffer data from a server via Websocket into another format. Below is the WebSocket code snippet: let ws = new WebSocket('wss://api.example.com/websocket'); ws.binaryType = 'arrayb ...
How can I reset the value in ng2-select2 by clicking on a button? Here is my current HTML code: <select2 id="bill" [data]="colBill" [options]="option" (valueChanged)="onBillArray($event);"> The corresponding Typescript code is: this.arrBill = []; ...
Is there a method to set up a Global error handler that captures the stack trace of errors and sends it to an external system like NewRelic without needing to modify each individual API? This would follow the DRY principle by avoiding changes to multiple ...
After making changes to my Angular App and testing it locally with 'ng serve', I used 'ng build' to generate artifacts in the 'dist' directory. Utilizing the Azure App Services extension in VS code, I selected the 'dist&a ...
I'm encountering a challenge with my Angular application where I have implemented multiple checkboxes within an options form. The issue arises when changes made to the checkboxes are not consistently displayed as expected. Below is the pertinent code ...
Is there a way to automatically render the state when the app loads without having to click a button? I am currently facing an issue where the state is empty until I manually trigger the click function by pressing a button. I have tried using this.store.se ...
I have implemented a drag and drop feature where elements are dragged and dropped into an array. The dragging functionality is contained in one component, with three different types of fields - text, number, and date - that can be dragged onto the form. On ...
Looking to incorporate a phone number input field with formatting in a reactive form. The desired format is (123) 456-7890. For reference, check out this example link: https://stackblitz.com/edit/angular13-reactive-form-validation-y1qwmf?file=src/app/app. ...
Currently, I am working on canvas and facing an issue while handling gesture events with Hammer.js. Despite seeking help in various forums, including this one, I have yet to receive a response. Now, I am trying my luck with Ionic gestures but struggling to ...
I am working on a Typescript project where I have a basic class that includes an `id` and `name` property. I would like to add a third property called `displayText` which combines the values of these two properties. In C#, I know how to achieve this using ...
I am completely lost on how to connect an asp.net web api with my ionic 2 mobile app. Any help or advice on resolving this problem would be greatly valued! ...
I have been encountering an issue with the Wijmo date picker. When I input a proper date format for the Wijmo date, sometimes it is accepted without any errors while other times an error message pops up. My code for setting the form value is: this.mfForm. ...
I'm facing an issue while attempting to develop a custom form control in Angular 14. Despite no errors showing up in the console, my custom control is not rendering as expected. When inspecting the Elements tab in the console, I can see the parent com ...
In my current Vue 3 Typescript project, I am utilizing Vuex. The code snippet below showcases how I have implemented it: import { createStore, useStore as baseUseStore, Store } from 'vuex'; import { InjectionKey } from 'vue'; export i ...
I am facing a challenge with displaying the sum of rows data in the footer section of an Angular Material Table that has fixed footer and header, as well as a paginator. How can I calculate the sum of rows data to show in the footer? https://i.sstatic.net/ ...
image of JSON file Just a heads up: I'm looking to add data directly without the need to write it to a .json file, perhaps by using Angularfire2 database. user = { name: 'Arthur', age: 21 }; const options = {Headers, responseType: &apo ...