ng icon indicating copy to clipboard operation
ng copied to clipboard

[Feature]: 建议升级angular版本至14+,并将诸如TiTipDirective、TiValidationDirective等指令迁移至standalone,以帮助开发者更好地使用hostDirectives特性。

Open yinhaox opened this issue 1 year ago • 0 comments

What problem does this feature solve

场景一,通过指令,为表单控件设置默认的提示信息

import {Directive, Optional} from '@angular/core';
import {TiSelectComponent, TiTextComponent, TiValidationDirective} from "@opentiny/ng";

@Directive({
  selector: 'ti-select[formControlName],input[tiText][formControlName]',
  standalone: true,
  host: {
    "[style.width.px]": "240"
  },
  hostDirectives: [
    // TiValidationDirective
  ]
})
export class DefaultDirective {
  constructor(
    @Optional() private tiValidationDirective: TiValidationDirective,
    @Optional() private tiSelect: TiSelectComponent,
    @Optional() private tiInput: TiTextComponent,
  ) {
    if (tiSelect) {
      tiSelect.placeholder = "Please Choose";
    }
    if (tiInput) {
      tiInput.nativeElement.placeholder = "Please Input";
    }
    if (tiValidationDirective) {
      tiValidationDirective.tiValidation = { tip: "Required", tipPosition: "right" };
    }
  }
}

如上指令,目前由于TiValidationDirective是非“standalone”的,为了给tiValidationDirective设置默认值,我需要对每个控件都添加tiValidation。 例如:

<ti-formfield [formGroup]="formGroup">
  <ti-item [label]="'Country'" [required]="true">
    <ti-select country formControlName="country" tiValidation></ti-select>
  </ti-item>
  <ti-item [label]="'Name'" [required]="true">
    <input formControlName="name" tiText tiValidation/>
  </ti-item>
</ti-formfield>

image

What does the proposed API look like

预期给TiValidationDirective迁移至standalone后,可以通过hostDirectives组合,如:

@Directive({
  selector: 'ti-select[formControlName],input[tiText][formControlName]',
  hostDirectives: [{
    directive: TiValidationDirective,
    inputs: ["tiValidation"],
  }]
})
export class DefaultDirective {
  // ...
}

html中就不需要每个控件都指定tiValidation

<ti-formfield [formGroup]="formGroup">
  <ti-item [label]="'Country'" [required]="true">
    <ti-select country formControlName="country"></ti-select>
  </ti-item>
  <ti-item [label]="'Name'" [required]="true">
    <input formControlName="name" tiText/>
  </ti-item>
</ti-formfield>

yinhaox avatar Nov 05 '23 15:11 yinhaox