Merge two input fields into one to send data to the backend

Question

Merge two input fields into one to send data to the backend

I have created two input fields, one for selecting a date and the other for entering a time. Before submitting the form to the backend, I need to combine these two inputs into one variable. For example,

<input type="text" name="myDate">

and

<input type="text" name="myTime">

should be combined to create a new variable called myDateTime.

Below is an example code snippet and a demo showcasing this functionality.

HTML

<form  [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
    <div  class="form-group">
        <div class="date-ctrl">
            <label> Date</label>
            <input class="form-control short" [(ngModel)]="myDate" matInput [matDatepicker]="picker"
                   (dateInput)="addEvent('input', $event)" [ngModelOptions]="{standalone: true}">
            <mat-datepicker-toggle class="img-calendar" matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </div>
        <div class="time-ctrl">
            <label> Time</label>
             <input class="form-control shot" [(ngModel)]="myTime" />
        </div>
    </div>

    <div class="footer-dialog">
        <div class="field-bottom">
            <span class="ctrl-button">
                <button class="dialog-button save-color" mat-button type="submit">Save</button>
            </span>
        </div>
    </div>

</form>

Component

createForm() {
      this.form = this.formBuilder.group({
          myDate: [''],
          myTime: ['']
      });
      // const myDateTime = myDate + myTime
  }

  onSubmit() {
      console.log(this.form.value)
  }

Click here for a live demo for further reference.

angular typescript

Answer 1

Answer №1

After analyzing your original stackblitz demo (which appears to be quite broken), I have managed to fix it sufficiently to showcase the functionality you are seeking:

datepicker-filter-example.ts:

    import {Component, OnInit} from '@angular/core';
import {
  FormControl,
  FormBuilder,
  FormGroup,
  Validators,
  FormGroupDirective,
  NgForm
} from "@angular/forms";

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample implements OnInit {

  constructor(private formBuilder: FormBuilder){}
  public form: FormGroup;
  dateFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }

  ngOnInit():void{
    this.createForm();
  }

  addEvent(v1:any, v2: any){
    console.log('Add Event Called');
  }

  myFilter(d: Date): boolean {
        const day = d.getDay();
    const month = d.getMonth();
        const todays_date = d.getDate();
        const todaysDateObject = new Date();
        const today = todaysDateObject.getDate();
    const actualMonth = todaysDateObject.getMonth();
    console.log(todays_date)

        /** Prevent actual system date from being selected.*/
    if (month === actualMonth && todays_date === today) {
      return false;
    } else if (day !== 0 && day !== 6) {
      return true;
    } else {
      return false;
    }

        /** Prevent Saturday, Sunda.*/
//        return day !== 0 && day !== 6;
    }



 createForm() {
      this.form = this.formBuilder.group({
        myDate: new FormControl(),
        myTime: new FormControl(),
      });
  }

  onSubmit() {
    const combined = `${this.form.get('myDate').value} ${this.form.get('myTime').value}`;
    console.log(combined);
  }

}

datepicker-filter-example.html

    <form  [formGroup]="form" (ngSubmit)="onSubmit(form.value)"
    novalidate>

<div class="form-group">
    <div class="date-ctrl">
    <label>Date</label>
    <input class="form-control short" formControlName="myDate"  matInput [matDatepicker]="picker"
           (dateInput)="addEvent('input', $event)">
    <mat-datepicker-toggle class="img-calendar" matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</div>

<div class="time-ctrl">
    <label>Time</label>
    <input class="form-control shot" formControlName="myTime" />
</div>

</div>

<div class="footer-dialog">
    <div class="field-bottom">
        <span class="ctrl-button">
        <button class="dialog-button save-color"  mat-button type="submit">Save & Start</button>
        </span>

    </div>
</div>

</form>

Answer 2

After analyzing your original stackblitz demo (which appears to be quite broken), I have managed to fix it sufficiently to showcase the functionality you are seeking:

datepicker-filter-example.ts:

    import {Component, OnInit} from '@angular/core';
import {
  FormControl,
  FormBuilder,
  FormGroup,
  Validators,
  FormGroupDirective,
  NgForm
} from "@angular/forms";

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample implements OnInit {

  constructor(private formBuilder: FormBuilder){}
  public form: FormGroup;
  dateFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }

  ngOnInit():void{
    this.createForm();
  }

  addEvent(v1:any, v2: any){
    console.log('Add Event Called');
  }

  myFilter(d: Date): boolean {
        const day = d.getDay();
    const month = d.getMonth();
        const todays_date = d.getDate();
        const todaysDateObject = new Date();
        const today = todaysDateObject.getDate();
    const actualMonth = todaysDateObject.getMonth();
    console.log(todays_date)

        /** Prevent actual system date from being selected.*/
    if (month === actualMonth && todays_date === today) {
      return false;
    } else if (day !== 0 && day !== 6) {
      return true;
    } else {
      return false;
    }

        /** Prevent Saturday, Sunda.*/
//        return day !== 0 && day !== 6;
    }



 createForm() {
      this.form = this.formBuilder.group({
        myDate: new FormControl(),
        myTime: new FormControl(),
      });
  }

  onSubmit() {
    const combined = `${this.form.get('myDate').value} ${this.form.get('myTime').value}`;
    console.log(combined);
  }

}

datepicker-filter-example.html

    <form  [formGroup]="form" (ngSubmit)="onSubmit(form.value)"
    novalidate>

<div class="form-group">
    <div class="date-ctrl">
    <label>Date</label>
    <input class="form-control short" formControlName="myDate"  matInput [matDatepicker]="picker"
           (dateInput)="addEvent('input', $event)">
    <mat-datepicker-toggle class="img-calendar" matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</div>

<div class="time-ctrl">
    <label>Time</label>
    <input class="form-control shot" formControlName="myTime" />
</div>

</div>

<div class="footer-dialog">
    <div class="field-bottom">
        <span class="ctrl-button">
        <button class="dialog-button save-color"  mat-button type="submit">Save & Start</button>
        </span>

    </div>
</div>

</form>

Answer 3

Answer №2

If you're looking to customize your form, here are a few options to consider:

Translate/map the form upon submission
Create a personalized form control for date and time input that links to a single value

It seems like you're interested in developing a custom form field.

For detailed instructions on how to design and implement Custom Form Controls, check out this informative article:

To seamlessly integrate these features with Angular Material, refer to the official documentation provided here:

Answer 4

If you're looking to customize your form, here are a few options to consider:

Translate/map the form upon submission
Create a personalized form control for date and time input that links to a single value

It seems like you're interested in developing a custom form field.

For detailed instructions on how to design and implement Custom Form Controls, check out this informative article:

To seamlessly integrate these features with Angular Material, refer to the official documentation provided here:

Merge two input fields into one to send data to the backend

Answer №1

Answer №2

Similar questions

Upgrade your @ngrx/store from version 10 to version 11 or 12

Having trouble with your Angular CLI project after attempting to duplicate it by copy and paste?

When using Jest + Enzyme to test a stateful class component, encountering problems with Material-UI's withStyles functionality is a common issue

What is causing the ESLint error when trying to use an async function that returns a Promise?

Transforming JavaScript code with Liquid inline(s) in Shopify to make it less readable and harder to understand

The CSS files are not loading automatically in my React application using Vite

Submitting Angular data to PHP back-end is a common practice

Guide to implementing a specified directive value across various tags in Angular Material

Error: The jasmine framework is unable to locate the window object

Encountering difficulty when trying to initiate a new project using the Nest CLI

Tips for keeping a specific key value pair as the final entry in a Typescript Object

Customizing Angular Material select fields with border radius

I'm really puzzled as to why they would choose to export in this manner in React

Learn the steps to translate conditional string interpolation with NGX-translate

Is it recommended to include modules in the Imports section of SharedModule in Angular?

Angular router.redirect is not able to pass variables as expected

Adding a static global constant in webpack dynamically

Is it possible to verify if an object matches a type without explicitly setting it as that type?

When attempting to access a static method in TypeScript, an error occurs indicating that the property 'users_index' does not exist on the type 'typeof UserApiController'

Execute TypeScript on the Angular project's specified version