Question

我有一个包含许多必填字段的Angular 2表单。那些已经分配了Application State。我想在这些字段的标签上添加一个星号。

Validators.required

我用Google搜索并阅读docs，但无法找到此用例的实现。

我知道我可以手动添加所需的属性并从那里开始工作，但我宁愿避免，因为这似乎是验证器分配的冗余。

Answer 1

不确定，如果它是最好的 ng2风格的解决方案，但是这个怎么样：

让你的FormComponent包含一系列必填字段。在您的模板中，您可以使用以下内容：

<label for="firstName">
    FirstName <span *ngIf="isFieldRequired('firstName')"> *</span>
</label>

如果您不想通过模板重复代码，则可以使用星号为Label创建单独的组件，例如：

@Component({
  selector: 'my-label',
  template: `<label for="{{id}}">{{label}} <span *ngIf="isFieldRequired(id)"> *</span></label>`
})
export class MyLabelComponent {
  @Input() label: string;
  @Input() id: string;
  @Input() requires: [];
  constructor() { }

    isFieldRequired(id) {
      return this.requires.indexOf(id) !== -1; // check if the array contains the value
  }
}

在Form Component中，您只需将值传递给my-label组件，例如：

<my-label [requires]="requiredFields" [label]="'Name'" [id]="'name'"></my-label>

以下是此示例的 working plunker ：http://plnkr.co/edit/M66IFQGhhe82mNt3ekxw?p=preview 了解如何与更多自定义验证器一起使用所需的定义。请参阅 app.component.ts

基于Angular 2形式的指定验证器标记必填字段的标签

1 个答案: