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

How can we optimize component loading in react-virtualized using asynchronous methods?

Angular - Is there a specific type for the @HostListener event that listens for scrolling on the window?

Encountering a common issue: Angular 6 and aws-amplify network error issue

Mastering the art of mocking modules with both a constructor and a function using Jest

Unable to fetch packages from npm or github using jspm install because of proxy configuration restrictions

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

For an unknown reason, I am facing difficulties in using the Storage feature from @angular/fire in ANGULAR 16

Should we use fakeAsync() or done() to handle asynchronous tasks

Contrary to GraphQLNonNull

Tips for sending properties to a child component in a React Native project using TypeScript

Implementing ETag in Angular 2

Accelerated repository uses TypeScript to compile a node application with dependencies managed within a shared workspace

Testing Angular Service Calls API in constructor using Jasmine Test

Subject.next() not triggering Observable on value change

Tips for effectively passing an array to props in Vue when leveraging Typescript and the class component decorator

Creating a unique optional string array interface in TypeScript

Use Filterpipe within Angular Template to sort content based on Object Value

declaration of function interface and property that cannot be modified

Using Angular and RxJS5 to refresh data from both HTTP requests and sockets

Adding a fresh element and removing the initial item from a collection of Objects in JavaScript