Материализация css Datepicker не возвращает значение в Angular 8 реактивной форме

Question

Я использую материализовать css 1.0.0 в Angular 8 проекте, и у меня возникла проблема.

Я создал angular реактивную форму с DatePicker и formselect внутри, но переменная 'valueChanges' из formGroup срабатывает только тогда, когда formselect обновляет свое значение, но значение datepicker остается прежним .

Важно 1: Я знаю, что есть пакет angular2-materialize, но он работает только в версии 0.100

Важно 2: Я пытаюсь использовать materialize- css без JQuery, поскольку теперь это дополнительный пакет.

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

Есть ли способ angular для решения этой проблемы?

Спасибо, пока.

Answer 1

Я бы предложил использовать FormControl s в FormGroup и полностью пропустить решение ViewChild. Вы можете создать formDOM следующим образом:

this.formDOM = this._formBuild.group({
   start: new FormControl(null),
   metric: new FormControl(null),
})

, а затем получить их значения onChange или выполнить какое-либо действие пользователя, подобное этому:

console.log(this.formDOM.controls['start'].value);
console.log(this.formDOM.controls['metric'].value);

Также FormControls имеют свои собственные Событие onChange, поэтому вы можете подписаться на них независимо с помощью this.formDOM.controls['start'].valueChanges и this.formDOM.controls['metric'].valueChanges.

. С помощью этого решения вы можете удалить строки @ViewChild из файла .ts и #startinput и #metricinput параметры из HTML

ПРИМЕЧАНИЕ: еще одна полезная вещь с FormControl s заключается в том, что вы можете использовать так называемые валидаторы , чтобы сделать ввод обязательным или ограничить возможные значения. FormControl принимает массив валидаторов (и других опций) в качестве второго параметра при создании, аналогично этому: start: new FormControl(null, [Validators.required]) (Validators можно импортировать из @angular/forms, и он содержит несколько базовых c проверок методы, но вы также можете написать свой собственный валидатор и использовать его в своих компонентах). Подробнее об этом читайте в документации: FormControl и Validators