Materializecss Datepicker没有将值返回为Angular 8反应形式

Question

我在Angular 8项目中使用materializecss 1.0.0，但遇到问题。

我制作了一个角反应式，里面有一个datepicker和一个formselect，但是仅当formselect更新其值时才触发formGroup的'valueChanges'变量，但是datepicker] 值仍然相同。

重要事项1：我知道有一个名为angular2-materialize的软件包，但仅适用于版本0.100

重要的2：我正在尝试在没有JQuery的情况下使用materialize-css，因为它现在是可选包。

form-request-card.component.html（部分）

[...]
<form [formGroup]="formDOM">          
            <div class="row">
                <!-- Datepicker para data inicial (start) -->
                <div class="form-group col s12">
                    <label>Data inicial</label>
                    <input #startinput class="form-control datepicker" formControlName="start" type="date">
                </div>
    
                <!-- Selector referente a metrica utilizada na analise dos dados (metric) -->
                <div class="form-group input-field col s12">
                    <select #metricinput class="form-control" formControlName="metric">
                        <option value="" disabled selected>Selecione o valor</option>
                        <option *ngFor="let metric of metricArray" [value]=metric>
                            {{metric}}
                        </option>
                    </select>
                    <label>Métrica</label>
                </div>
           </div>
</form>
[...]

form-request-card.component.ts

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

declare const M: any;

@Component({
  selector: 'app-form-request-card',
  templateUrl: './form-request-card.component.html',
  styleUrls: ['./form-request-card.component.css']
})

export class FormRequestCardComponent implements OnInit, AfterViewInit {

  @ViewChild('startinput', {static: true}) startInput: ElementRef;
  @ViewChild('metricinput', {static: true}) metricInput: ElementRef;

  readonly title = "test";

  metricArray: string[];
  formDOM: FormGroup;

  constructor(private _formBuilder: FormBuilder) { 
    this.metricArray = ["op1", "op2", "op3"];
  }

  ngOnInit() {
    this.formDOM = this._formBuilder.group({ start: [null], metric: [null] });
    this.formDOM.valueChanges.forEach( (value) => console.log(JSON.stringify(value)) );
  }

  ngAfterViewInit() {
    let pickerProperty = {
      autoClose: true, format: "yyyy-mm-dd", container: "body"
    };

    M.Datepicker.init(this.startInput.nativeElement, pickerProperty);
    M.FormSelect.init(this.metricInput.nativeElement, {});
  }
}

当触发valueChanges时，console.log结果为：

    {"start":null,"metric":"op1"}

是否有“角度方法”来解决这个问题？

谢谢。

Answer 1

我建议在FormControl中使用FormGroup，并完全跳过ViewChild解决方案。您可以这样创建formDOM：