How can I retrieve the value of a nested reactive form in Angular?

I'm working with a nested form setup that looks like this:

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    date1: new FormControl(''),
    date2: new FormControl('')
  })
});

My goal is to make the date2 minimum date dependent on the value of date1, as shown below:

<mat-form-field class="datepickerformfield" floatLabel="never">
    <input matInput class="dp" formControlName="date2" [min]="profileform.controls['date1'].value" [matDatepicker]="date2" placeholder="DD/MM/YYYY" >
</mat-form-field>

I've also attempted:

[min]="profileform.address.controls['date1'].value"

And

[min]="profileform.controls[address].controls['date1'].value"

However, I keep receiving an error message stating:

Cannot read property 'value' of undefined

How can I properly access the value of date1 using the profileform object?

angularformstypescript

Answer №1

Resolved successfully using:

[min]="profileform.get('address.date1').value"

Currently developing with Angular6+

Answer №2

Within the form, there is a specific element named value that mirrors your form setup but only contains the values. You can retrieve the data by using the code 

[min]="profileform.value.address.date1"
.

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

After upgrading to Angular version 14, ComponentFactoryResolver and AbstractControlDirective have been enhanced with new

After upgrading from Angular version 9 to version 14, I encountered errors related to the ComponentFactoryResolver and AbstractControlDirective. Below is a snippet of my directive.ts file: private componentRef: ComponentRef<FormErrorComponent>; ...

angular

Achieving a shuffling CSS animation in Angular 8 may require some adjustments compared to Angular 2. Here's how you can make it

Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...

cssangular

What is the best way to access form data in React using a React.FormEvent<HTMLFormElement>?

I am looking for a way to retrieve the values entered in a <form> element when a user submits the form. I want to avoid using an onChange listener and storing the values in the state. Is there a different approach I can take? login.tsx ... interfa ...

javascriptreactjsformstypescript

Navigating in express

Here is the structure I am working with: server.ts routes/ index.ts homeRoute.ts In server.ts: let app = Express(); app.use(router); In routes/index.ts: const routes = Router(); export default function router() { routes.use('/home' ...

node.jstypescriptexpress

How can we efficiently load paginated data from a database while still implementing pagination using Angular Material?

I have a large table with more than 1000 entries that I want to display using a <mat-table></mat-table>. Since loading all the entries at once would be too much, I am looking to implement pagination and load only 20 entries per page. The chal ...

angulartypescriptangular-material

The functionality for determining whether the value isset as 'Yes' or 'No' is not functioning properly in my PHP form

I'm currently working on creating a combined 'Order Calculator / Order Form' using one php form. The calculator part of the form is functioning perfectly and accurately calculates the total for all 5 order options both on the live page and i ...

phphtmlformsisset

Refreshing Datatable in Angular 2 - Trouble with dtInstance.then error

I'm currently working on an Angular 2 application where I have a component that includes both a dropdown list and a datatable. The requirement is to display details in the table based on the name selected from the dropdown list. HTML - <div> ...

angulardatatable

Angular Http Promise is not returning the expected value

Struggling to update my component property with an HTTP result, but encountering issues. Thank you for your assistance! (currently using a static mock object) Class - Object export class Gallery { name: string; } Service import { Injectable } from ...

angularhttptypescriptundefined

The form data consistently replaces existing values with each new entry added

I am struggling to persist all the form values that are entered in my component using local storage. Despite setting and pushing the form values, I noticed that each time I push the data, it replaces the previously entered form data. My goal is to retain a ...

angularangular7

Utilizing Typescript for parsing large JSON files

I have encountered an issue while trying to parse/process a large 25 MB JSON file using Typescript. It seems that the code I have written is taking too long (and sometimes even timing out). I am not sure why this is happening or if there is a more efficien ...

javascriptnode.jsjsontypescriptfilestream

Issue encountered during the creation of an Angular 4 Webpack build from the beginning

I am currently utilizing the version of Webpack and webpack-cli listed below to create a basic component app. "webpack": "^4.6.0", "webpack-cli": "^2.0.14", Below is my webpack.config.json: const path = require('path'); module.exports ...

angularwebpack

Experiencing a bug in my express application: TypeError - Unable to access properties of undefined (reading 'prototype')

I've encountered the TypeError: Cannot read properties of undefined (reading 'prototype') error in my javascript file. Despite researching online, it seems that many attribute this issue to importing {response} from express, but I am not doi ...

javascripttypescriptexpress

VSCode mistakenly detecting Sequelize findOne and findAll return type as any inferences

I have a model defined using Sequelize as shown below: import { Sequelize, Model, BuildOptions, DataTypes } from 'sequelize'; interface User extends Model { readonly id: string; email: string; name: string; password_hash: string; reado ...

node.jstypescriptvisual-studio-codesequelize.js

Displaying svg files conditionally in a react native application

I have developed an app specifically for trading dogs. Each dog breed in my app is associated with its own unique svg file, which are all stored in the assets folder (approximately 150 svg files in total). When retrieving post data from the backend, I re ...

javascriptreactjstypescriptreact-nativesvg

With TypeScript, you have the flexibility to specify any data type in the generic types when using the axios.get method

axios.get('/api') When working with TypeScript as shown above, it is important to designate types for better clarity. This allows us to reference the type definition of axios, like so: (method) AxiosInstance.get<any, AxiosResponse<any> ...

javascripttypescriptaxiostypescript-generics

Storing information in a FormArray within an Angular reactive form

I'm facing a challenge with setting an array of data from an API to a FormGroup that contains a form array. It seems like I'm missing something in the process. Form this.blog = this.fb.group({ title: ['', Validators.required], ...

angularangular-reactive-forms

Issue encountered: Cannot locate module: Error message - Unable to find 'stream' in 'C:devjszip-test ode_modulesjsziplib' folder

I am encountering an issue in my angular 7 application while using jszip v3.2.1. During the project build process (e.g., running npm start), I receive the following error message: ERROR in ./node_modules/jszip/lib/readable-stream-browser.js Module not fo ...

javascriptangulartypescriptnpmjszip

What is the importance of using getters for functions involving Moment.js in vueJS and typescript?

weekOfMonth() calculates the current month and week within that month. <template> <h3>{{ weekOfMonth }}</h3> </template> <script lang="ts"> export default class HomeView extends Vue { const moment = require(& ...

typescriptvue.jsmomentjs

The problem with Angular Jasmine Karma is with the [SortKey] and various elements present on the page

While working on building some pages and integrating jasmine .spec files for karma to run with Angular 5, I encountered numerous errors. For example, when using Chrome and checking the command prompt, I came across: Error: Template parse errors: Can& ...

angularjasminekarma-runnerkarma-jasmine

Transform a nested AngularJS service into an Angular Observable service

Currently, I am working on migrating AngularJS(pre 1.5) services that use nested calls to a project being rebuilt in Angular(11). The challenge I'm facing is how to rewrite these services using RXJS. I have been searching for resources or detailed ex ...

angularjsangularrxjsmigrationobservable