代码之家 › 专栏 › 技术社区 › Sumchans

角度材质日期选择器-选定日期和单选按钮值

angular-material angular

Sumchans · 技术社区 · 7 年前

我在mat无线电组中有一个matdatepicker作为选项之一。当用户选择日期时,该值应作为单选按钮的值传递,我该如何做。现在我有日期更改&在typescript端传递值并格式化它的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>

以下是typescript部分:

 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);
  }
}

1 回复 | 直到 7 年前

Sumchans 7 年前

经过大量的挖掘,我找到了这个问题的答案。如果这里有人遇到同样的问题,请将其张贴在此处。我只需要将[(ngModel)]添加到mat单选组,如果选择的单选按钮是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>

Typescript部分

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;
  }