ng
ng copied to clipboard
[Feature]: 建议升级angular版本至14+,并将诸如TiTipDirective、TiValidationDirective等指令迁移至standalone,以帮助开发者更好地使用hostDirectives特性。
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>
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>