输入框组件介绍

使用 <input> 标签可以创建输入框，根据 type 属性的不同值，可以创建不同类型的输入框，例如文本输入框、密码输入框、数字输入框等。

在 Angular 中，我们可以使用 formControlName 属性和 ReactiveFormsModule 模块来绑定表单控件，并通过组件类中的表单控件来获取/设置表单控件的值。

标签属性

在 <input> 标签中，常用的属性有：

• type：输入框的类型，例如 text、password、number 等；
• formControlName：绑定表单控件的名称；
• [class.xxx]：绑定 class 样式，可根据控件的状态动态添加/移除多个样式类；
• placeholder：指定提示文字；
• disabled：禁止输入框的交互；
• readonly：只读，不可编辑；
• maxlength：最大字符数；
• min、max：约束数字输入框的取值范围（仅在 type="number" 时有效）；
• step：控制数字输入框的步进值（仅在 type="number" 时有效）；
• required：必填项，不能为空。

状态类

常用的状态类有：

• .is-valid：表单控件内容有效；
• .is-invalid：表单控件内容无效。

可以根据控件的有效性来动态添加/移除这两个类，以改变 DOM 元素的样式。

组件示例

以下是一个示例，展示了如何使用 <input> 标签以及根据表单控件的状态类来动态改变样式。

<input type="text"
       formControlName="companyname"
       (change)="fillUnit()"
       [class.is-invalid]="f.company_name.invalid && f.company_name.touched"
       class="form-control"
       placeholder="Company Name">

注意，上述代码片段是一个 Angular 模板，其中使用了以下语法：

• formControlName：表单绑定名称，需要在相关的 Form Group 中定义并初始化；
• (change)：事件绑定，当控件的值发生改变时触发；
• [xxx]：属性绑定，可以将组件类中的值绑定到模板中；
• class：绑定 CSS 样式类；
• placeholder：占位符，当输入框为空时会显示该提示文字。