html 自定义formControl输入组件。

Posted 2021-05-11

import { Component, OnInit, forwardRef, Input, ElementRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
declare var jQuery: any;
import '../../../assets/semantic/semantic.min.js';

@Component({
  selector: 'app-vehicle-select',
  templateUrl: './vehicle-select.component.html',
  styleUrls: ['./vehicle-select.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => VehicleSelectComponent),
      multi: true
    }
  ]
})
export class VehicleSelectComponent implements ControlValueAccessor {
  @Input() value;
  propagateChange = (_: any) => { };

  constructor(private elRef: ElementRef) { }

  ngOnInit() {
    console.log('filter init');
    jQuery(this.elRef.nativeElement).find('#vehicle-filter').dropdown({ placeholder: 'value' });
  }

  writeValue(value: any): void {
    if (value !== undefined) {
      // If a value is provided to the Component
      if (this.value && String(this.value).length) { // Is Not an Empty String
        this.value = value;
      }

    }
  }
  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }
  registerOnTouched(fn: any): void {
  }
  setDisabledState?(isDisabled: boolean): void {
  }
  onChange(value) {
    this.propagateChange(value);
  }
}

<select class="ui dropdown" id="vehicle-filter" [(ngModel)]="value" (change)="onChange($event.target.value)">
  <option value="" selected>Tous</option>
  <option value="Frigorifique">Frigorifique</option>
  <option value="Taut Liner">Taut Liner</option>
</select>