19、优化Angular表单组件：从定制到数据保存

优化Angular表单组件：从定制到数据保存

1. 组件行为与外观定制

在处理表单时，我们遇到了一些问题，比如州字段的错误消息显示空间不足，并且没有对邮政编码字段进行有效的美国邮政编码验证。为了解决这些问题，我们将对组件的行为和外观进行定制。

首先，我们创建了名为 “compact” 的属性。当该属性设置为 true 时，若出现验证问题，我们将不显示错误消息，而是把文本字段渲染为红色，利用浏览器内置的 HTML5 验证工具提示用户错误信息。同时，为了实现基于模式的验证，我们创建了 pattern 属性，用户可以根据需要设置该属性，以进行除基本必填项检查之外的验证。

以下是 AddressComponent 的部分代码示例：

<article class="panel panel-default {
  
  {addressType}}">
  <header class="panel-heading">
    <h2 class="h4">
      {
  
  {addressType}} Address
    </h2>
  </header>
  <section class="panel-body">
    <div class="col-md-2">
      <shine-text-field
        bind-object="address"
        field_