Angular 将两个变量输入字段合并为一个以提交后端

我已经编写了两个输入字段，一个用于mydate，一个用于mytime。在提交到后端之前，我想合并成一个。例如，

和提交表单时
myDate
和
myTime
成为一个变量等
myDateTime

下面是我提供的示例代码和演示

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)]="myDate" />
</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>

更多参考资料
基于您最初的stackblitz演示（该演示已完全损坏），我已对其进行了足够的修复，以演示您的目标：

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> 


日期
时间
保存并启动
基于您原来的stackblitz演示版（它已经很坏了），我已经对它进行了足够的修复，以展示您的目标：

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> 


日期
时间
保存并启动
您可以选择：


您可以在提交时翻译/映射表单
您可以创建自定义表单控件，该控件允许您输入日期和时间并绑定到单个值

我怀疑您想创建自定义表单字段

有关如何创建和注册自定义表单控件的详细信息，请参阅本文：

要使这一切都能很好地与角材料，请参阅此文档
您可以选择：


您可以在提交时翻译/映射表单
您可以创建自定义表单控件，该控件允许您输入日期和时间并绑定到单个值

我怀疑您想创建自定义表单字段

有关如何创建和注册自定义表单控件的详细信息，请参阅本文：

要使这一切都能很好地与角材料，请参阅此文档
非常感谢兄弟……非常抱歉。。我的代码很差…我能再问你一个问题吗。。。假设我有另一个变量要发送到后端。示例UserId。。我该怎么办？@Pravu-很好-看看这里的HttpClient信息-您需要创建另一个类似于我添加到原始代码中的名为“UserId”的FormControl，然后使用这个.form.get（'UserId'））.value获取值-然后按照HttpClient文档将数据发送到服务器非常感谢兄弟…非常抱歉。。我的代码很差…我能再问你一个问题吗。。。假设我有另一个变量要发送到后端。示例UserId。。我该怎么办？@Pravu-很好-看看这里的HttpClient信息-您需要创建另一个类似于我添加到原始代码中的名为“UserId”的FormControl，然后使用这个.form.get（'UserId'）。值来获取值-然后按照HttpClient文档将数据发送到服务器