Is there a way to execute a function within a directive when the form is marked as pristine? I want to apply a CSS class to a tab header when the form is pristine. <form [formGroup]="awayForm" (ngSubmit)="onSubmit()" awayConfirm [cancelClicked]="cancel ...
Currently, I am developing a Spring REST API with an interface built using Angular 2. My issue lies in the inability to upload a file using Angular 2. This is my Java Webresource code: @RequestMapping(method = RequestMethod.POST, value = "/upload") publ ...
I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...
How can I implement a show/hide feature for a select box in Angular 2+? Here's what I have so far: <select> <option disabled selected>Flow progress</option> <option *ngFor='let flow of flows'>{{flow}}</option> ...
I've been working on a cutting-edge application that combines an Angular 2 frontend with a powerful Java backend. An exciting feature of this application is a dynamic form, consisting of various search criteria. Upon submission, I execute an http get requ ...
I am currently working on implementing form validation using Reactive Forms in Angular 2. Here is the scenario: There are two input fields Here are image examples for step 1 and step 2: https://i.stack.imgur.com/nZlkk.png https://i.stack.imgur.com/jNIFj ...
I'm currently utilizing a Template Driven Form. HTML of the Parent Component <form #BasicForm="ngForm" (ngSubmit)="onBasicDetailsSubmit()" id="BasicForm"> <app-input-text [(sharedVar)]="dashboardDetails.Text1" [isMandatory]="true" ></ap ...
I am encountering an issue with adding multiple custom validations to a form. Currently, I am only able to add a single custom validation to my form. How can I include multiple validations? For example: this.user = this.fb.group({ name: ['', Validators ...
Exploring the Angular2 new Forms API has revealed two distinct approaches to forms: Template driven and reactive (model-driven) forms. I am curious about the real-world differences between these two methods, beyond just syntax. Which approach is more adva ...
This is the formGroup I created this.createOrderForm = this.fb.group({ items: this.fb.array([]) }); To add an item on button click addItem() { const control = <FormArray>this.createOrderForm.controls['items']; const addrCtrl = ...
I am currently working with the forms module and Google Maps to update the geocode based on the search box provided on the map. The map is a separate component that emits the Geocode using the function geoCodeChange(). This event is handled by another func ...
Below is a form I am working with: <form *ngIf="showForm" [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"> <textarea type="text" placeholder="Description" [formContro ...
Currently, I am encountering an issue with a list of groups of radio buttons in Angular2. My objective is to bind the value of each group of radio buttons using [formControl]. However, when implementing this, the radio buttons seem to lose their normal mut ...
Accessing in Angular docs is not the same as before, you must first grab the FormGroup instance and then find the FormControl instance within it. I wonder why? This example works: <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div class=" ...
In my development project using Angular 2, I encountered an issue with managing a long and complex form by splitting it into a parent component and two child components for better organization. The challenge arose when I needed to track the form status for ...
As I work on creating a form, I encounter the need to distinguish between two scenarios. If the user selects 'create a user', the password inputs should be displayed. On the other hand, if the user chooses to edit a user, then the password inputs ...
Take a look at this particular component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <h3>Input with two decimals</h3> <input type="text" ...
Imagine you have a file called index.js containing a function expression: $scope.submit = function() { if ($scope.username && $scope.password) { var user = $scope.username; var pass = $scope.password; if (pass == "admin" && user ...
I recently updated my Angular application from rc4 to rc5, along with upgrading angular forms from version 0.2.0 to 0.3.0. After the update, I started encountering an error that seems to be related to a change in ngFormControl within forms 0.3.0. zone.js: ...
I've been encountering an issue with updating form values post fetching data from an API. I attempted to utilize the *ngIf technique, but unfortunately, the form remains invisible even though it is properly set. Although I cannot provide the entire projec ...
Trying to simplify the process of implementing a custom validator logic for ngModel, I have a pre-defined model (interface) that already stores all necessary data. Why go through the trouble of creating an identical schema with FormControls when the requir ...
I am currently in the process of upgrading my Angular 2 RC 1 app to Angular 2 RC 4, and part of this update involves migrating my existing forms to Angular 2 RC 4 New Forms. Could someone provide guidance on how to successfully update my existing forms to ...
Recently, I encountered an issue with my Angular app while using dynamic forms. Everything was working fine until I added the --aot flag to my CLI command. Suddenly, I started receiving the error message "Property 'controls' does not exist on typ ...
I'm facing a challenge with getting radio buttons to function correctly in my reactive form. Below is the code for my component: export class SettingsFormComponent implements OnInit { public sForm: FormGroup; public submitted: boolean; d ...
Hey there! I'm fairly new to Angular 4 and I've been working on creating a p-dataTable. My goal is to change the color of each row based on the quantity property of my object. Specifically, if the quantity is less than 10, I want the row to be displayed in ...
In Angular2, there seems to be an issue with one-way binding to the name attribute for a group of radio inputs. For example: <div [ngFormModel]="form"> <input type="radio" [name]="varName" [id]="id1" ngControl="r1"> <input type="radio" ...
I'm in the process of creating a modal-driven form with custom validation requirements. Specifically, I want to ensure that the user's password meets certain criteria (including having an uppercase letter, lowercase letter, and number). Instead of writing ...
I am faced with a situation where I need to populate a table's headers based on the JSON data {id, name}. The ngModel name I have used in the component is this.id which needs to be mapped for custom filtering accordingly. For example, list=[{id:age ...
I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...
I am currently utilizing Angular 2 and I am trying to retrieve the names of all restaurants from a dropdown menu. Currently, when I click on the text field, it displays all the results, but I would like it to only show results after I have entered at least ...
I am currently working on implementing a dropdown feature in my Angular application. The dropdown consists of a list of shops, and when I select a shop, it should display the corresponding content for that shop. However, I've encountered an issue wher ...
Here's where the issue lies: This is the code I am referring to: <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'"> <div class="pb-1"> <md2-select placeholder="{ ...
I have developed a custom AsyncValidator to verify the uniqueness of a userName. Inspired by this tutorial, I have implemented a delay of 500ms. However, I am facing a challenge in preventing the HTTP service call if the input value does not meet a speci ...
I'm struggling to solve this issue, it's just not functioning as expected. Here is the original plunker created by Pascal Prekht, providing an explanation on template driven forms: And my version can be found here. It mirrors the original but with one of ...
For my Angular 2+ application utilizing reactive forms, I have a requirement to share the main FormGroup across multiple components. This will allow different sections of the form such as header and footer to be managed independently by separate components ...
I am facing an issue with an array that includes displayName with HTML tags: this.topicsList = [ {id: "173", name: "Discussion1", displayName: "Discussion1", status: 1}, {id: "174", name: "discussion123", displayName: "discussion123", status: 1}, {id: "19 ...
I am currently designing a dynamic form where each Field contains a list of values, with each value represented as a string. export class Field { name: string; values: string[] = []; fieldType: string; constructor(fieldType: string) { this ...
Let's take a look at the ts file import { Component } from '@angular/core'; import { NavController, Platform } from 'ionic-angular'; import { SalePage } from "../sale/sale"; import {Md5} from 'ts-md5/dist/md5'; import { ...
I've been working on a form using Angular2 and I've implemented two custom validators for the email address field. The initial validator checks for valid email format, while the second (which is asynchronous) checks if the email address already exists in ...
Upon creating a model-driven form, an error is encountered: Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class). ...
I've been encountering some issues while trying to bind data from an input in Angular 2. Below is the HTML code snippet: <input type="text" class="animated bounceIn input-proposta" placeholder="Enter your proposal" [(ngModel)]="propo ...
My task involves creating a form where users can edit their magazine subscriptions. Here is the code snippet I am working with: Component: export class OrderFormComponent { subscriptions = [ {id: 'weekly', display: 'Weekly new ...
Seeking advice on how to efficiently reuse my Form Component. Data Model: class Contact { id?: String; name: String; } When a new Contact is created, the id is optional in the model as it doesn't exist at that point. When editing a Contac ...