how to get data from dynamic inputs using reactive forms in angular 13

im curently working on an angular project where an employee will choose a date from an angular datePicker and a table will popup showing the days of that month and under each day an input where he can enter 1 or 0 depends if he worked that day or not . my probleme is i dont know how to get the data that the user entered and console log that data wheneever he clicks on the save button

note : the date picker is a bit weird (im not importing some packages) on the StackBlitz i dont know how to fix it but in my app it works just fine im sorry about that, just chose a date and the table will change according to the date entered, my ts file :

import { Component, OnInit } from '@angular/core';
import {FormControl, FormArray, FormGroup, FormBuilder} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { DatePipe } from '@angular/common'

import * as moment from 'moment';
import { Moment } from 'moment';

export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',

  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css'],
  providers: [
      provide: DateAdapter,
      useClass: MomentDateAdapter,

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
export class ProjectComponent implements OnInit {

  monthDates: String[] = [];
  daysOfMonth !: number ;
  daysArray !: FormGroup;

  constructor(public datePipe : DatePipe, private fb:FormBuilder) { }

  ngOnInit(): void {
    this.daysArray ={
      daysWorked : this.fb.array([
        new FormControl(''),
    let today = new Date();
    let todayMonth = today.getMonth() +1;
    let todayYear = today.getFullYear() ;
    const month = Number(todayMonth);
    const year = Number(todayYear);
    this.monthDates = this.getDaysArray(year,month);
    this.daysOfMonth = this.monthDates.length; 

  getDaysArray = (year: number, month: number) => {
    const names = Object.freeze(
       [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ]);
    const date = new Date(year, month - 1, 1);
    const result = [];
    while (date.getMonth() == month - 1) {
      date.setDate(date.getDate() + 1);
    return result;

  date = new FormControl(moment());

  setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue =;

  dateChanged($event: MatDatepickerInputEvent<Date>) {
    let monthChosen = moment($"MM");
    let yearChosen =moment($"yyyy");
    let month = Number(monthChosen);
    let year = Number(yearChosen);
    this.monthDates = this.getDaysArray(year,month);
    this.daysOfMonth = this.monthDates.length;
  addDaysWorked() {
    console.log("add Days Worked !");

  editDaysWorked() {
    console.log("Edit Days Worked");


my CSS :

.fixTop {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 100px;
    margin-left: 100px;
.form-control {
    /* padding: 30%; */
    padding-left: 10px;
    padding-right: 2px;
    size: 1;

.fixTable {
    margin-top: 50px;
    margin-right: 300px;
.top {
    margin-top: 100px;
    margin-inline: 15%;

.example-month-picker .mat-calendar-period-button {
    pointer-events: none;
  .example-month-picker .mat-calendar-arrow {
    display: none;
.right {
    margin-left: 200px;

.c5 {
    background-color: blue;

my HTML :

<div class="d-flex">
    <div class="ms-5 mx-5 col-1">
        <mat-form-field appearance="outline">
            <mat-label>Month and Year</mat-label>
            <input matInput [matDatepicker]="dp" [formControl]="date" (dateChange)="dateChanged($event)">
            <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
            <mat-datepicker #dp
    <div class="card shadow-sm p-3 right bg-body rounded aaa">
            <span class="border pt-1 ps-4 bg-info me-1"></span> <span>Jours férié</span>
            <span class="border pt-1 ps-4 bg-success ms-5 me-1"></span> <span>RTT Employeur</span>
            <span class="border pt-1 ps-4 bg-danger ms-5 me-1"></span> <span>Absence ou congés</span>
            <span class="border pt-1 ps-4 bg-primary ms-5 me-1"></span> <span>RTT Salaré(e)</span>

        <div class="mt-5">
            <div class="d-flex mx-5 me-5 mb-5">
                    <table class="table">
                            <th scope="col" *ngFor="let date of monthDates">{{ date }}</th>
                                <td *ngFor="let i of [].constructor(this.daysOfMonth)">
                                    <input class="form-control" type="text"  value="0" size="1" maxlength="1">
                                <td *ngFor="let i of [].constructor(this.daysOfMonth)">
                                    <input disabled class="form-control" type="text"  value="" size="1" maxlength="1">
            <div [align]="'center'">
                <button mat-raised-button (click)="addDaysWorked()" color="primary" > save </button>
                <button class="ms-3" mat-raised-button (click)="editDaysWorked()" color="warn" > edit </button>

this is my StackBlitz : stackBlitz

Leave a Comment