I'm currently working on an Angular project that involves Dynamic Inputs. When I click on a button, new inputs are created and now I want to use FormBuilder to get the data. However, I am unsure of how to go about this.
Although I am familiar with using FormBuilder in a static case, I have not been able to find any resources or information on how to implement it dynamically.
What steps should I take to successfully achieve this?
Is there a method you prefer for including additional inputs to an already existing formgroup? One option is utilizing form arrays, which allows you to easily retrieve the values by accessing them through formGroup.get("formArray").value. This way, you can retrieve all input values in one go.
If you're looking to dynamically add new inputs every time a user clicks a button and retrieve the value, you can follow this approach based on @ZsoltB's answer. Check out the working StackBlitz link for reference.
@Component({
...all the necessary decorator configurations
})
export class AppComponent {
formArray = new FormArray([
new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
}),
]);
name = 'angular';
addNewInput = () => {
this.formArray.push(
new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
})
);
};
}
After some thought, I managed to find a solution by drawing inspiration from the code snippet shared below:
dynamic form in angular, add fields on runtime
My sincere thanks for your help!
Creating a unique wormhole effect using a cylinder and rotating texture is my current project. To see an example, visit: The texture rotation is achieved with the following code... tunnel.material.map.offset.y += 0.01; tunnel.material.map.offset.x += ...
Utilizing jQuery's load() method, I am attempting to insert a page fragment into a new page. It appears that this can only be achieved with load(), as get() does not support page fragments. Upon completion of the load, it is necessary for me to invok ...
Having developed a ShoppingCart Service in Angular 12 with Firestore as the backend, my objective is to maintain the shopping functionality throughout the application. Upon page load, a method is triggered to check the presence of a "cartId" field in the l ...
I want to have a button appear when the user focuses on an input with the ng-model=query. I know there is an ng-focus directive, but how can I implement it? <input type="search" ng-model="query"> <!--this is the button I need to show once th ...
The topic of arrow functions is commonly discussed, but I've been unable to find an answer to the following scenario. Let's consider this example from an Angular 4 Directive: export class MouseParallaxDirective implements AfterViewInit { const ...
I'm struggling to understand the typescript error that keeps popping up, it says: 'MyGoogleLogin', which doesn't have a return-type annotation, is being given an implicit 'any' return type. All I want is for the component t ...
Working with HTML files In this scenario, the values for the sub combobox are being retrieved through a PHP select query and these values are in character format. I have successfully tested passing integer values. <select name="sub" id="sub"> ...
It appears that it's not necessary for objects in the scene to have unique names; multiple objects can share the same name... If I need a list of these objects, do I need to create a getObjectsByName method or is there an alternative way to achieve t ...
I am working on an AngularJS controller where I have defined a 'MapCtrl' function. In this function, I am trying to retrieve the user's current position using geolocation and store it in a variable called curPos. However, when I try to log t ...
Is there a way to streamline the code for sending a request from one page to another using a form with 2 buttons? <form method="post"> <button id="button_1" value="val_1" name="but1">button 1</button> <button id="button_2" val ...
I am currently working on implementing an autocomplete textfield for my Rails application, following the example from the Agile Web Development with Rails, 3rd Edition. However, when I try to insert their demo code: <%= stylesheet_link_tag &apo ...
How can I ensure that my async function only returns at a specific point and not void at the end? const fun = () => { const list = []; let streamFinished = 0; let streamCount = files.length; await fs.readdir(JSON_DIR, async(err, files) => ...
When I trigger a save action, a hidden div is supposed to appear. The structure of this div is like so: <div class="Working" style="display: none;">Message</div> As part of the save process in my code, the following logic is implemented: fun ...
Currently, I am working on a package that utilizes PubNub. My goal is to write jest tests for all the package files, but I have encountered an issue. Specifically, I am struggling to figure out how to cover events within the listener. // add listener ...
I am looking to create a custom object with predefined "base" properties, as well as additional properties. It is important for me to be able to export the type of this new object using the typeof keyword. I want to avoid having to define an interface for ...
I've hit a roadblock in trying to automatically launch the sign-up (registration) page using @auth0/auth0-react. Previously, I would send mode which worked with auth0-js. So far, I have attempted the following without success: const { loginWithRedir ...
My Angular web application utilizes Protractor for end-to-end tests. Recently, I implemented OAuth0 authentication into my app. To disable Angular synchronization before redirecting to the non-Angular OAuth0 page, I use await browser.waitForAngularEnabled( ...
Why isn't my navbar hamburger menu opening on smaller screens? Despite the links displaying correctly on larger screens, I am unable to get the navbar to open. I've tried various troubleshooting methods such as changing tags in the header, deleti ...
In my quest to develop a table component that utilizes components to define columns, I came up with the following structure: interface UsageModel { title: string; } const Usage = () => { const data: UsageModel[] = [{ title: "Stack Overflow&qu ...
I'm in the process of setting up a typescript-react-eslint project and I've encountered an eslint error with this boilerplate component: import * as React from "react"; interface ButtonProps { children?: React.ReactNode, onClick?: (e: any) ...