Question

我正在尝试使用Angular Material和Angular 6版本7创建自定义MatFormFieldControl。自定义输入是重量输入，具有一个值（输入type =“ number”）和一个单位（选择“ kg” “，“G”，...）。它必须放置在mat-form-field-control内部，可以使用反应式（formControlName =“ weight”）并支持错误状态（<mat-error *ngIf="weightControl.hasError('required')">error<...>），甚至可以使用自定义验证器。

我写了这个实现：

weight-input.component.html

<div [formGroup]="weightForm">
  <input fxFlex formControlName="value" type="number" placeholder="Valore" min="0" #value>
  <select formControlName="unit" [style.color]="getUnselectedColor()" (change)="setUnselected(unit)" #unit>
    <option value="" selected> Unità </option>
    <option *ngFor="let unit of units" style="color: black;">{{ unit }}</option>
  </select>
</div>

weight-input.component.css

.container {
  display: flex;
}

input, select {
  border: none;
  background: none;
  padding: 0;
  opacity: 0;
  outline: none;
  font: inherit;
  transition: 200ms opacity ease-in-out;
}

:host.weight-floating input {
  opacity: 1;
}

:host.weight-floating select {
  opacity: 1;
}

weight-input.component.ts

import { Component, OnInit, Input, OnDestroy, HostBinding, ElementRef, forwardRef, Optional, Self } from '@angular/core';
import { FormGroup, FormBuilder, ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatFormFieldControl } from '@angular/material';
import { Subject } from 'rxjs';
import { FocusMonitor } from '@angular/cdk/a11y';

export class Weight {
  constructor(public value: number, public unit: string) { };
}

@Component({
  selector: 'weight-input',
  templateUrl: './weight-input.component.html',
  styleUrls: ['./weight-input.component.css'],
  providers: [
    { provide: MatFormFieldControl, useExisting: WeightInput }
  ],
})
export class WeightInput implements OnInit, OnDestroy, MatFormFieldControl<Weight>, ControlValueAccessor {

  stateChanges = new Subject<void>();

  @Input() 
  get units(): string[] {
    return this._units;
  }
  set units(value: string[]) {
    this._units = value;
    this.stateChanges.next();
  }
  private _units: string[];

  unselected = true;
  weightForm: FormGroup;

  @Input()
  get value(): Weight | null {
    const value: Weight = this.weightForm.value;
    return ((value.value || value.value == 0) && !!value.unit) ? value : null;
  }
  set value(value: Weight | null) {
    value = value || new Weight(null, '');
    this.weightForm.setValue({ value: value.value, unit: value.unit });
    if(this._onChange) this._onChange(value);
    this.stateChanges.next();
  }

  static nextId = 0;
  @HostBinding() id = `weight-input-${WeightInput.nextId++}`;

  @Input()
  get placeholder() {
    return this._placeholder;
  }
  set placeholder(placeholder) {
    this._placeholder = placeholder;
    this.stateChanges.next();
  }
  private _placeholder: string;

  focused = false;

  get empty() {
    const value = this.weightForm.value as Weight;
    return (!value.value && value.value != 0) || !!!value.unit;
  }

  @HostBinding('class.weight-floating')
  get shouldLabelFloat() {
    return this.focused || !this.empty;
  }

  @Input()
  get required(): boolean {
    return this._required;
  }
  set required(required: boolean) {
    const temp: any = required;
    required = (temp != "true");
    this._required = required;
    this.stateChanges.next();
  }
  private _required = false;

  @Input()
  get disabled(): boolean {
    return this._disabled;
  }
  set disabled(disabled: boolean) {
    const temp: any = disabled;
    disabled = (temp != "true");
    this._disabled = disabled;
    this.setDisable();
    this.stateChanges.next();
  }
  private _disabled = false;

  errorState = false;
  controlType = 'weight-input';

  @HostBinding('attr.aria-describedby') describedBy = '';
  setDescribedByIds(ids: string[]) {
    this.describedBy = ids.join(' ');
  }

  onContainerClick(event: MouseEvent) {
    if(!this.disabled) {
      this._onTouched();
    }
   }

  constructor(
    @Optional() @Self() public ngControl: NgControl, 
    private fb: FormBuilder, 
    private fm: FocusMonitor,
    private elRef: ElementRef<HTMLElement>
  ) {
    if(this.ngControl != null) { 
      this.ngControl.valueAccessor = this; 
    }
    fm.monitor(elRef.nativeElement, true).subscribe(origin => {
      this.focused = !!origin;
      this.stateChanges.next();
    });
  }

  ngOnInit() {
    this.weightForm = this.fb.group({
      value: null,
      unit: ''
    });
    this.setDisable();
    this.weightForm.valueChanges.subscribe(
      () => {
        const value = this.value;
        if(this._onChange) this._onChange(value);
        this.stateChanges.next();
      }
    );
  }

  ngOnDestroy() {
    this.stateChanges.complete();
    this.fm.stopMonitoring(this.elRef.nativeElement);
  }

  writeValue(value: Weight): void {
    if(value instanceof Weight) {
      this.weightForm.setValue(value);
    }
  }

  _onChange: (_: any) => void;
  registerOnChange(fn: (_: any) => void): void {
    this._onChange = fn;
  }

  _onTouched: () => void;
  registerOnTouched(fn: () => void): void {
    this._onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  private setDisable(): void {
    if(this.disabled && this.weightForm) {
      this.weightForm.disable();
    }
    else if(this.weightForm) {
      this.weightForm.enable();
    }
  }

  getUnselectedColor(): string {
    return this.unselected ? '#999' : '#000';
  }

  setUnselected(select): void {
    this.unselected = !!!select.value;
  }

}

这是必须去的地方

app.component.html

<mat-form-field fxFlexAlign="stretch">
        <weight-input formControlName="peso" [units]="units" placeholder="Peso" required></weight-input>
        <mat-error *ngIf="peso.invalid">errore</mat-error>
      </mat-form-field>

（比索在意大利表示重量，单位是习俗，因此您将其绑定到输入[单位]）

app.component.ts（部分）

units = [ 'Kg', 'g', 'T', 'hg' ];
ngOnInit() {
    this.initForm();
  } 

private initForm(): void {
    this.scheda = this.fb.group({
      diametro: [ null, Validators.required ],
      peso: [ null, Validators.required ], //There will be custom validators, for instance for unit control (Validators.unitsIn(units: string[]))
      contorno: [ null, Validators.required ],
      fornitore: null,
      note: null
    });
  }

get diametro(): FormControl | undefined {
    return this.scheda.get('diametro') as FormControl;
  }
  get peso(): FormControl | undefined {
    return this.scheda.get('peso') as FormControl;
  }

所以我需要的是：

-这是MatFormFieldControl和ControlValueAccessor的良好实现吗？问题，错误吗？

-主要是：如何管理输入的errorState，以使其表现为普通的mat表单字段cotrol，以及如何使用外部表单控件验证器检测/关联它？（例如，如果控件“ peso”具有Validators。如果自定义输入为空，则必需的errorState为true，否则为false，与最终的自定义验证器相同）

更新：我将空方法从此(!value.value && value.value != 0) || !!!value.unit改成了了(!value.value && value.value != 0) && !!!value.unit

我将选择输入更改为了垫选择输入，但在功能上仍然相同

<div [formGroup]="weightForm">
 <input fxFlex formControlName="value" type="number" placeholder="Valore" min="0" #value>
  <mat-select fxFlex="10" id="mat-select" formControlName="unit">
    <mat-option value="" selected> Unità </mat-option>  
    <mat-option *ngFor="let unit of units" [value]="unit">
        {{ unit }}
      </mat-option>
    </mat-select>
</div>

Answer 1

可能应该使用Validator接口，但是不幸的是，它创建了令人讨厌的循环错误依赖性。因此，只需在自定义组件中添加一个errorState属性，即可检查注入到构造函数中的ngControl，如下所示：

get errorState() {
  return this.ngControl.errors !== null && !!this.ngControl.touched;
}

这应该尊重父组件中的常规Angular验证器，例如formGroup中的这一行：

peso: [ null, Validators.required ],

Angular Material自定义MatFormFieldControl-如何管理错误状态

1 个答案: