等价于 Angular 中的 asp-for 和 asp-validation-for答案

【问题标题】：Equivalent to asp-for and asp-validation-for in Angular等价于 Angular 中的 asp-for 和 asp-validation-for
【发布时间】：2020-07-02 18:04:06
【问题描述】：

我是 Angular 的新手（我们正在使用 Angular 10），我正在寻找类似 ASP MVC Core 的 TagHelper asp-for 和 asp-validation-for 以减少复制粘贴：

<div class="form-group">
    <label asp-for="FirstName"></label>
    <input asp-for="FirstName" class="form-control" />
    <span asp-validation-for="FirstName"></span>
</div>
<div class="form-group">
    <label asp-for="Gender"></label>
    <select asp-for="Gender" class="form-control" asp-items="Html.GetEnumSelectList<Gender>()"></select>
    <span asp-validation-for="Gender"></span>
</div>
<div class="form-group">
    <label asp-for="DateOfBirth"></label>
    <input asp-for="DateOfBirth" class="form-control" />
    <span asp-validation-for="DateOfBirth"></span>
</div>

结果是：

<label> 具有正确的 for 属性。
<input>, <select>, ... 有正确的id, name 属性和正确的type，验证属性由模型驱动（[Required], [StringLength(20)], [EmailAddress], . ..)
验证<span> 有默认消息或来自[Required(ErrorMessage ="Your first name is required")]
所有标签（尤其是枚举值）都由模型驱动 ([Display(Name = "Intersex")])

<div class="form-group">
    <label for="FirstName">Your first name</label>
    <input class="form-control input-validation-error" type="text" data-val="true"
        data-val-required="Your first name is required" id="FirstName" name="FirstName" value="Marcel"
        aria-describedby="FirstName-error" aria-invalid="true">
    <span class="text-danger field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="true"><span
            id="FirstName-error" class="">Your first name is required</span></span>
</div>
<div class="form-group">
    <label for="Gender">Your gender</label>
    <select class="form-control valid" data-val="true" data-val-required="The Your gender field is required."
        id="Gender" name="Gender" aria-describedby="Gender-error" aria-invalid="false">
        <option selected="selected" value="0">Male</option>
        <option value="1">Female</option>
        <option value="2">Intersex</option>
    </select>
    <span class="text-danger field-validation-valid" data-valmsg-for="Gender" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
    <label for="DateOfBirth">Your are born at</label>
    <input class="form-control valid" type="date" data-val="true"
        data-val-required="The Your are born at field is required." id="DateOfBirth" name="DateOfBirth"
        value="1992-02-09" aria-describedby="DateOfBirth-error">
    <span class="text-danger field-validation-valid" data-valmsg-for="DateOfBirth"
        data-valmsg-replace="true"></span>
</div>

什么是最好的替代品？指令？

【问题讨论】：

标签： angular asp.net-core

【解决方案1】：

前段时间我使用了一个组件。来自this SO

改进一下：

@Component({
  selector: 'app-error',
  template: `
    <small class="form-text text-danger" *ngIf="isInvalid" >
       <ng-content></ng-content>
    </small>
`
})
export class ErrorComponent {

  get isInvalid() {
    const control = this.form.form.get(this.controlName);
    return control.touched && control.invalid && (this.error ? control.errors[this.error] : true);
  }
  constructor(@Optional() @Host() private form: FormGroupDirective,
    @Attribute("controlName") private controlName,
    @Attribute("error") private error) { }


}

你使用，例如

    <!--if your FormControl has an unique validator-->
    <div class="form-group">
      <label for="name">Name:</label>
      <input class="form-control" name="name" formControlName="Name">
      <app-error controlName="Name">The name is mandatory</app-error>
    </div>

    <!--if your FormControl has severals validators-->
    <div class="form-group">
      <label for="email">e-mail:</label>
      <input class="form-control" name="email" formControlName="email">
      <app-error controlName="email" error="required">Email is mandatory.</app-error>
      <app-error controlName="email" error="email">Email mal formatted.</app-error>
    </div>

我想你可以提高更多。

你也可以看看这个Netanel Basal amazing article关于“让你的 Angular 表单的错误消息神奇地出现”

【讨论】：