Angular MatFormControl, ControlValueAccessor

Tôi có một thành phần tùy chỉnh, nó là một bọc cho mat-select. Làm thế nào tôi có thể sử dụng nó trong các thành phần khác? Tôi đã đọc về formControl và controlValueAccessor, nhưng tôi không hiểu rất nhiều.

my custom.html

    <mat-select>
<mat-option [value]="opt" *ngFor="let op of opt; index as i">{{opt[i]}}</mat-option>
</mat-select>
<input matInput>

tùy chỉnh của tôi.

import { Component, OnInit, Input } from '@angular/core';
import { MatFormFieldControl } from '@angular/material/form-field';

@Component({
  selector: 'cust-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [{provide: MatFormFieldControl, useExisting: InputComponent}]

})
export class InputComponent extends MatFormFieldControl<string> implements OnInit {

  @Input() opt: string;

  setDescribedByIds(ids: string[]): void {
    throw new Error('Method not implemented.');
  }
  onContainerClick(event: MouseEvent): void {
    throw new Error('Method not implemented.');
  }

  constructor() {
    super();
  }

  ngOnInit(): void {
  }

}

app.html của tôi

<mat-form-field>
  <cust-input [opt]="myopt"></cust-input>
</mat-form-field>

app.ts của tôi

import { Component } from '@angular/core';




@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'form';
  myopt = ['a', 'b', 'c', 'd'];



}

Tôi không cần một cái gì đó giống như custmo.html của tôi

  <mat-form-field>
     <mat-select>
    <mat-option [value]="opt" *ngFor="let op of opt; index as i">{{opt[i]}}</mat-option>
    </mat-select>
    <input matInput>
    </mat-form-field>

stackbiz

vì vậy câu trả lời là: nếu chúng ta muốn sử dụng wrappe tùy chỉnh của mình, chúng ta cần tạo điều khiển trường-biểu mẫu tùy chỉnh cho nó, trong trường hợp của chúng ta, chúng ta cần tạo điều khiển trường-biểu mẫu tùy chỉnh

// kiểm soát trường biểu mẫu tùy chỉnh của chúng tôi

import { ValueAccessor } from './value-accessor';
import { MatFormFieldControl } from '@angular/material/form-field';
import {
  Input,
  HostBinding,
  Optional,
  Self,
  ElementRef,
  OnDestroy,
  Directive,
} from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgControl } from '@angular/forms';
import { Subject } from 'rxjs';

@Directive()
export class FormControlDirective<T> extends ValueAccessor<T>
  implements MatFormFieldControl<T>, OnDestroy {
  @Input()
  get value() {
    return this._value;
  }
  set value(val: T) {
    if (val !== this._value) {
      this._value = val;
      this.stateChanges.next();
    }
  }

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

  @Input()
  get required() {
    return this._required;
  }
  set required(req: boolean) {
    this._required = coerceBooleanProperty(req);
    this.stateChanges.next();
  }

  get empty() {
    return !this._value;
  }

  constructor(
    @Optional() @Self() public ngControl: NgControl,
    private fM: FocusMonitor,
    private elRef: ElementRef<HTMLElement>
  ) {
    super();

    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }

    fM.monitor(elRef.nativeElement, true).subscribe((origin) => {
      this.focused = !!origin;
      this.stateChanges.next();
    });
  }

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

  private _value: T | null;
  private _placeholder: string;
  private _required = false;
  nextId = 0;
  stateChanges: Subject<void> = new Subject<void>();
  focused = false;

  @HostBinding() id = `${this.nextId++}`;

  errorState = false;
  controlType = 'my-select';
  autofilled?: boolean;

  @HostBinding('attr.aria-desribedby') describedBy = '';

  setDescribedByIds(ids: string[]): void {
    this.describedBy = ids.join('');
  }
  onContainerClick(event: MouseEvent): void {
    if ((event.target as Element).tagName.toLowerCase() === 'input') {
      this.elRef.nativeElement.focus();
    }
  }

  ngOnDestroy(): void {
    this.fM.stopMonitoring(this.elRef.nativeElement);
    this.stateChanges.complete();
  }
}

Tuy nhiên, nếu chúng ta muốn sử dụng ngModel trong trình bao bọc của mình, chúng ta cũng cần tạo trình truy cập giá trị điều khiển tùy chỉnh của mình

gia tăng giá trị custo

import { ControlValueAccessor } from '@angular/forms';

export class ValueAccessor<T> implements ControlValueAccessor {
  value: T | null;
  onChange: Function;
  onTouched: Function;
  disabled: boolean;

  writeValue(val: T): void {
    this.value = val;
  }
  registerOnChange(fn: Function): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: Function): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
}

Trong custom.wrapper.component.ts của chúng tôi, chúng tôi cần mở rộng điều khiển biểu mẫu của mình, đồng thời, nhìn vào tùy chỉnh-biểu mẫu-trường-kiểm soát và tìm kiếm cấu trúc, có một ngControl, chúng tôi thêm nó vào đó, để sử dụng biểu mẫu -control và value-accessor trong một lần.

select.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { MatFormFieldControl } from '@angular/material/form-field';
import { FormControlDirective } from 'src/app/forms/form-control';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss'],
  providers: [{ provide: MatFormFieldControl, useExisting: SelectComponent }],
})
export class SelectComponent extends FormControlDirective<string>
  implements OnInit {
  @Input() option: string;

  ngOnInit() {}
}

trong wrapper.component.ts, hãy xem xét các nhà cung cấp, ở đó, chúng tôi đang nói với Native MatFormFieldControl, đại loại như (Xin chào, tôi có điều khiển biểu mẫu của riêng mình, hãy sử dụng nó). Bước tiếp theo là tạo wrapp của chúng tôi

select.component.html

<mat-select [(ngModel)]="value">
  <mat-option [value]="item" *ngFor="let item of option; index as j">{{
    option[j]
  }}</mat-option>
</mat-select>

Vì vậy, bây giờ chúng ta có thể sử dụng nó trong các bản sao khác, bên trong mat-form-field

app.component.html

<mat-form-field>
  <mat-label>label</mat-label>
  <app-select [option]="opt" [(ngModel)]="title"></app-select>
</mat-form-field>

có một số liên kết hữu ích:

tài liệu chính thức

bài cũ nhưng rất hữu ích

Và bây giờ, tôi gặp một rắc rối khác XD Một số cách tôi cần sử dụng ngModel, chính xác trong, nhưng Nó nằm trong app-select & mat-select cùng một lúc. Khi tôi tìm thấy câu trả lời, tôi sẽ chỉnh sửa nó