我们经常了解到Angular提供了两种处理表单的选项:模板驱动或响应式(或者这两个!）

在某些情况下，小表单(例如，登录屏幕、单个文本输入或单个下拉列表)不需要那么冗长。

在这篇文章中，我们将看看5个简单而有价值的功能FormControl对象单独使用，而不为表带来任何额外配置。

1.在单个元素上使用FormControl而不使用FormBuilder

当我们有一个或两个表单元素时，创建一个FormControl对象，并将其绑定到HTML元素非常简单，可以完成工作。

在组件类中，我们所需要的是:

myControl = newFormControl(“默认值”);

在我们的HTML模板中:

< input type = " text "[formControl] = " myControl "/>

就是这样!不需要ngModel指令或FormBuilder服务。我们现在可以访问该控件的值myControl.value，如下面的完整代码示例所示:

2.获取控件的状态:原始-脏-有效-无效-触碰-未碰

Angular有六个有价值的属性FormControl对象:

• 原始的:当用户未更改元素值时，为
• 脏:相反的原始的-当用户更改了元素值时为true
• 有效:当元素值对应用于该元素的所有验证规则都有效时，为
• 无效:相反的有效的-当元素值无效时为true
• 感动:当用户将焦点放在元素上(比如点击它)，然后从元素上移除焦点(点击离开它)时为True。
• 没有:相反的感动了-表示用户还没有将焦点放在元素上或还没有删除该焦点。

属性上可以访问这六个属性FormControl对象，可用于向用户显示反馈，如错误消息或提示:

myControl" / >
< p >有效:{{myControl.valid}} < / p >
< p >感动:{{myControl.touched}} < / p >
< p >脏:{{myControl.dirty}} < / p >

下面是一个完整的例子:

这六个属性也会被Angular自动设置为CSS类在form元素上。因此，为这些属性添加一些CSS类实现是向用户提供可视化反馈的最简单方法:

.ng-invalid {
背景颜色:粉色;
｝.ng-dirty {
背景颜色:浅灰色;
｝

你可以试试上面的例子。首先，清除文本输入(需要一个值)以查看应用了ng-invalid类(粉红色背景色)，并在输入中输入任何内容以使其变脏(应用浅灰色背景色)。

3.决定何时使用updateOn更新FormControl值

默认情况下,FormControl将在用户更改HTML表单元素值时更新其值。

在某些情况下，我们可能希望等待该更新来触发验证和值更新。这就是updateOn财产就是一切。我们可以使用以下三个选项之一来延迟FormControl更新过程:

• 模糊- - -FormControl当HTML元素模糊事件发送时，值更新(元素失去焦点)
• 提交- - -FormControl值在HTML元素表单提交时更新。
• 改变—默认行为。用户更新实时反映为FormControl价值。

的updateOn属性传递为控制选项：

myControl = new FormControl('默认值'，{updateOn: 'blur'}）;

你可以用下面Stackblitz中的完整例子来测试这个例子:

4.重置为初始值，而不是使用initialValueIsDefault清除表单

HTML表单在重置时的默认行为是清除该表单中的所有值。

在某些情况下，如果我们在编辑模式下显示表单(比如用户正在使用它来编辑他们的个人资料信息)，在进行任何编辑之前重置到值可能会很方便，而不是清除整个表单。

这就是initialValueIsDefault控件选项非常有意义的地方:

myControl = new FormControl('val'，{initialValueIsDefault: true}）;

在对表单控件进行编辑后，重新设置表单将恢复到初始值，而不是清除输入。

你可以在下面的例子中尝试两种不同的行为:

5.使用valueChanges和statusChanges观察对象订阅表单更新

当我们需要使用RxJs操作符对表单更新做出反应时(例如，触发HTTP请求或过滤掉来自另一个可观察对象的列表)，从我们的FormControl可以很方便。

的公共属性FormControl：

• valueChanges-在所有值更新发生时立即发出
• statusChanges-当用户更改表单控件值时，发出所有状态更新(VALID或INVALID)

我们可以在组件类中订阅它们，也可以在HTML模板中使用async管道:

值变化:{{myControl。valueChanges| async}}

状态改变:{{myControl。statusChanges| async}}

我叫betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习并熟悉Angular。

如果您在网页开发方面需要任何帮助，请随时与我们联系!

如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium．