惯用 Angular 表单组件

Question

我正在创建一个使用 Bootstrap 输入组允许用户输入百分比的表单。

<div class="input-group">
  <input type="number" class="form-control" step="0.01">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

没什么特别的，但有点冗长，我可能想添加或修改我以后处理百分比输入的方式，所以我不想为表单上的每个百分比字段重复这个 HTML 块。如果我在做 React，我会将它包装在一个简单的功能组件中并完成。

const PercentInput = props => (
  <div class="input-group">
    <input {...props} type="number" step="0.01">
    <div class="input-group-append">
      <span class="input-group-text">%</span>
    </div>
  </div>
);

现在我有一个 PercentInput，它的作用就像 input（除了不同的 DOM），而且不需要知道或关心它是如何使用的，因为它可以盲目地将任何和所有道具向下传递到它包装和模仿的 input 节点。

在 Angular 中创建等效组件似乎要复杂得多。据我了解，我必须执行以下操作：

实施ControlValueAccessor (3-4 methods and 2 event handlers), so I can work with Angular forms (as described here or here)
明确处理我关心的任何 <input> 属性，因为 .

这似乎过于复杂，这让我觉得我陷入了 React 的思维模式，并且缺少或误解了惯用的 Angular 应用程序是如何做到这一点的。

在 Angular 中，什么是典型的干净、惯用的处理方法？

Answer 1

创建一个具有输入字典的组件属性:

百分比-input.component.ts

import { 
    Component, ViewChild, ElementRef, AfterViewInit, Input 
} from '@angular/core';

@Component({
    selector: 'percent-input',
    templateUrl: 'percent-input.component.html'
})
export class PercentInputComponent implements AfterViewInit {
    @ViewChild('inputField') inputField: ElementRef;
    @Input() props: { [key: string]: string };
    constructor() { }

    ngAfterViewInit() {
        if (this.props) {
            Object.keys(this.props).forEach( attr => {
                this.inputField.nativeElement.setAttribute(attr, this.props[attr]);
            });
        }
    }
}

百分比-input.component.html

<div class="input-group">
    <input type="number" #inputField class="form-control" step="0.01">
    <div class="input-group-append">
        <span class="input-group-text">%</span>
    </div>
</div>

这样用

<percent-input [props]="{ style: 'background-color: yellow'  }" ></percent-input>

Demo

惯用 Angular 表单组件

Idiomatic Angular form components

forms

dry

angular

angular-forms