Angular Material datepicker - 选择的日期和单选按钮值

Question

我在 mat-radio-group 中有一个 matdatepicker 作为选项之一。当用户选择日期时，该值应作为单选按钮的值传递，我该怎么做。现在我有 datechange 和 dateinput 事件，它们传递值并在打字稿端对其进行格式化。有什么简单的方法可以做到这一点。我只是以日期/月/年格式显示的日期，不需要任何其他数据。 代码如下：

<mat-radio-group formControlName="installType">
            <mat-radio-button value="8555">8555 - Delay Crew</mat-radio-button>
            <mat-radio-button value="9000">9000 - Self Install</mat-radio-button>
            <mat-radio-button [value] = "dp" (click)="datePicker.open()">
                <mat-input-container>
                    <input matInput [matDatepicker]="datePicker" placeholder="Post Date">
                    <mat-datepicker-toggle matSuffix [for]="datePicker">
                        <mat-icon matDatepickerToggleIcon></mat-icon>
                    </mat-datepicker-toggle>
                    <mat-datepicker #datePicker (dateInput)="addEvent($event)" 
                    (dateChange)="addEvent($event)" ></mat-datepicker>
                </mat-input-container>
            </mat-radio-button>
        </mat-radio-group>

这是打字稿部分：

 export class AddsaleComponent implements OnInit {
  form: FormGroup;
  dp: any;

  formatDate(date: Date) {
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    return `${day}/${month}/${year}`;
  }

  constructor(private wos: WorkorderService) {}

  ngOnInit() {
    this.form = new FormGroup({  
      installType: new FormControl('', Validators.required),  
    })
  }

  onSale(form) {
    this.wos.postWorkOrder(this.form.value);
  }

  addEvent(event: MatDatepickerInputEvent<Date>) {
   this.dp = this.formatDate(event.value);
  }
}

Answer 1

经过大量挖掘，我找到了答案。如果有人在这里遇到同样的问题，请在此处发布。我需要添加的只是 [(ngModel)] 到 mat-radio-group 并在后端进行一些验证，如果选择的单选按钮是 dataapicker。 ngModel 将值传递给组件 ts 代码，并且 datepicker 上的 datechange 事件也将日期传递给组件 ts 这是代码。

<mat-radio-group formControlName="installStatus" [(ngModel)]="installStatus">
            <mat-radio-button value="8555">8555 - Delay Crew</mat-radio-button>
            <mat-radio-button value="9000">9000 - Self Install</mat-radio-button>
            <mat-radio-button value="FFM" (click)="datePicker.open()">
                <mat-input-container>
                    <input #date matInput [matDatepicker]="datePicker" placeholder="FFM"
                    (dateInput)="addEvent(date)" (dateChange)="addEvent(date)">
                    <mat-datepicker #datePicker></mat-datepicker>
                </mat-input-container>
            </mat-radio-button>
        </mat-radio-group>

打字稿部分

ngOnInit() {
this.form = new FormGroup({
  accountNumber: new FormControl('', [Validators.required, 
    Validators.pattern('[0-9-]*'), 
    Validators.minLength(13), 
    Validators.maxLength(13)]),
  customerName: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z.][a-zA-Z. ]+')]),
  packageName: new FormControl('', Validators.required),
  campaignName: new FormControl('', Validators.required),  
  notes: new FormControl(''),
  entryDate: new FormControl(moment().format('ll')),
  installStatus: new FormControl('', Validators.required)
})


 }

  onSale(form) {
    if (this.form.value.installStatus !== "FFM") { this.datePickerInput = this.form.value.installStatus; }
    else { 
      var ffmDate = moment(this.datePickerInput);
      this.datePickerInput = moment(ffmDate).format('ll');
    }
    this.form.setValue({
      accountNumber: this.form.value.accountNumber, 
      customerName: this.form.value.customerName,
      packageName:this.form.value.packageName, 
      campaignName:this.form.value.campaignName, 
      notes:this.form.value.notes,
      entryDate:this.form.value.entryDate, 
      installStatus:this.datePickerInput
    });
    this.wos.postWorkOrder(this.form.value);
  }

  addEvent(date: MatDatepickerInputEvent<Date>) {
    this.datePickerInput = date.value;
  }