Skip to content

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

@yinhaox

Description

@yinhaox

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions