角材料-自定义自动完成组件

Question

我试图创建自己的自定义angular material组件，该组件能够使用mat-form-field控件。

除此之外，我希望该控件使用mat-autocomplete指令。

我的目的只是创建一个更好看的mat-autocomplete组件，该组件包含一个集成的clear按钮和自定义css箭头，如下图所示。我使用标准组件成功地获得了它，并添加了我想要的内容，但现在我想将它导出到泛型组件中。

null

• 即使正确选择了值，我的窗体也无效。
• 选择某个选项后，占位符自身设置不正确。
• 自动完成筛选选项根本不起作用
• 如果我没有具体单击输入，焦点就不会正确触发。

我认为我的前三个问题是由自动完成值导致的，该值没有正确地链接到我的反应表单。

这里有一个与该项目的个人公共存储库的直接链接（因为在这里显示的问题有点大）：Git存储库：https://github.com/tenmak/Material。

  <mat-form-field>
    <div fxLayout="row">
      <input matInput placeholder="Thématique" [matAutocomplete]="thematicAutoComplete" formControlName="thematique" tabindex="1">

      <div class="mat-select-arrow-wrapper">
        <div class="mat-select-arrow" [ngClass]="{'mat-select-arrow-down': !thematicAutoComplete.isOpen, 'mat-select-arrow-up': thematicAutoComplete.isOpen}"></div>
      </div>
    </div>
    <button mat-button *ngIf="formDossier.get('thematique').value" matSuffix mat-icon-button aria-label="Clear" (click)="formDossier.get('thematique').setValue('')">
      <mat-icon>close</mat-icon>
    </button>

    <mat-hint class="material-hint-error" *ngIf="!formDossier.get('thematique').hasError('required') && formDossier.get('thematique').touched && formDossier.get('thematique').hasError('thematiqueNotFound')">
      <strong>
        Veuillez sélectionner un des choix parmi les options possibles.
      </strong>
    </mat-hint>
  </mat-form-field>

  <mat-autocomplete #thematicAutoComplete="matAutocomplete" [displayWith]="displayThematique">
    <mat-option *ngFor="let thematique of filteredThematiques | async" [value]="thematique">
      <span> {{thematique.code}} </span>
      <span> - </span>
      <span> {{thematique.libelle}} </span>
    </mat-option>
  </mat-autocomplete>

  <mat-form-field>
    <siga-auto-complete placeholder="Thématique" [tabIndex]="1" [autoCompleteControl]="thematicAutoComplete" formControlName="thematique">
    </siga-auto-complete>

    <mat-hint class="material-hint-error" *ngIf="!formDossier.get('thematique').hasError('required') && formDossier.get('thematique').touched && formDossier.get('thematique').hasError('thematiqueNotFound')">
      <strong>
        Veuillez sélectionner un des choix parmi les options possibles.
      </strong>
    </mat-hint>
  </mat-form-field>

  <mat-autocomplete #thematicAutoComplete="matAutocomplete" [displayWith]="displayThematique">
    <mat-option *ngFor="let thematique of filteredThematiques | async" [value]="thematique">
      <span> {{thematique.code}} </span>
      <span> - </span>
      <span> {{thematique.libelle}} </span>
    </mat-option>
  </mat-autocomplete>

下面是我对泛型组件代码的尝试（简化）：

class AutoCompleteInput {
    constructor(public testValue: string) {
    }
}

@Component({
    selector: 'siga-auto-complete',
    templateUrl: './autocomplete.component.html',
    styleUrls: ['./autocomplete.component.scss'],
    providers: [
        {
            provide: MatFormFieldControl,
            useExisting: SigaAutoCompleteComponent
        },
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SigaAutoCompleteComponent),
            multi: true
        }
    ],
})
export class SigaAutoCompleteComponent implements MatFormFieldControl<AutoCompleteInput>, AfterViewInit, OnDestroy, ControlValueAccessor {
    ...
    parts: FormGroup;
    ngControl = null;

    ...

    @Input()
    get value(): AutoCompleteInput | null {
        const n = this.parts.value as AutoCompleteInput;
        if (n.testValue) {
            return new AutoCompleteInput(n.testValue);
        }
        return null;
    }
    set value(value: AutoCompleteInput | null) {
        // Should set the value in the form through this.writeValue() ??
        console.log(value);
        this.writeValue(value.testValue);
        this.stateChanges.next();
    }

    @Input()
    set formControlName(formName) {
        this._formControlName = formName;
    }
    private _formControlName: string;

    // ADDITIONNAL
    @Input() autoCompleteControl: MatAutocomplete;
    @Input() tabIndex: string;

    private subs: Subscription[] = [];

    constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) {
        this.subs.push(
            fm.monitor(elRef.nativeElement, true).subscribe((origin) => {
                this.focused = !!origin;
                this.stateChanges.next();
            })
        );

        this.parts = fb.group({
            'singleValue': '',
        });

        this.subs.push(this.parts.valueChanges.subscribe((value: string) => {
            this.propagateChange(value);
        }));
    }

    ngAfterViewInit() {
        // Wrong approach but some idea ?
        console.log(this.autoCompleteControl);
        this.autoCompleteControl.optionSelected.subscribe((event: MatAutocompleteSelectedEvent) => {
            console.log(event.option.value);
            this.value = event.option.value;
        })
    }

    ngOnDestroy() {
        this.stateChanges.complete();
        this.subs.forEach(s => s.unsubscribe());
        this.fm.stopMonitoring(this.elRef.nativeElement);
    }

    ...

    // CONTROL VALUE ACCESSOR
    private propagateChange = (_: any) => { };

    public writeValue(a: string) {
        console.log('wtf');

        if (a && a !== '') {
            console.log('value => ', a);
            this.parts.setValue({
                'singleValue': a
            });
        }
    }
    public registerOnChange(fn: any) {
        this.propagateChange = fn;
    }

    public registerOnTouched(fn: any): void {
        return;
    }

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

Answer 1

终于解决了！！！

>

这里的问题是，当在子[SigaAutoCompleteComponent]中创建输入字段时，父[CreateDossierComponent]必须知道在子[CreateDossierComponent]中填充的值，这部分丢失了，这就是它不能变为有效的原因，因为它认为输入字段没有被触及[保持无效]--通过向父[SigaAutoCompleteComponent]发出值，然后根据需要操作窗体控件来解决这个问题。

溢出mat-form-field和input导致了这个问题--通过将mat-form-field元素移动到child来解决这个问题，其他代码保持不变，这解决了占位符重叠和单击箭头图标来显示

这是可以做到的--[重新设计的一种方法]，将服务注入子组件并在那里执行自动完成功能[我还没有实现这一点，但这将工作，因为它只是部门字段的副本]

在create-doiser.component.html中

      <!-- </div> -->
      <mat-autocomplete #thematicAutoComplete="matAutocomplete" [displayWith]="displayThematique">
        <mat-option *ngFor="let thematique of filteredThematiques | async" [value]="thematique">
          <span> {{thematique.code}} </span>
          <span> - </span>
          <span> {{thematique.libelle}} </span>
        </mat-option>
      </mat-autocomplete>

在autocomplete.component.html中

<mat-form-field style="display:block;transition:none ">
<div fxLayout="row">
  <input  matInput   placeholder="Thématique" [matAutocomplete]="autoCompleteControl" (optionSelected)="test($event)" tabindex="{{tabIndex}}">
  <div class="mat-select-arrow-wrapper" (click)="focus()">
    <div class="mat-select-arrow" [ngClass]="{'mat-select-arrow-down': !autoCompleteControl.isOpen, 'mat-select-arrow-up': autoCompleteControl.isOpen}"></div>
  </div>
</div>

</mat-form-field>

在autocomplete.component.ts中

in set value emit the value to parent
this.em.emit(value);

create-dosier.component.ts

  this.thematique = new FormControl( ['', [Validators.required, this.thematiqueValidator]]

    ); 

this.formDossier.addControl('thematique',this.thematique);
call(event){

    this.thematique.setValue(event);
    this.thematique.validator=this.thematiqueValidator();
    this.thematique.markAsTouched();
    this.thematique.markAsDirty();

  }
}