快速创建简单而强大的角形式

Angular用两种方法简化了形式的创建和验证：模板驱动和反应性形式。模板驱动的形式非常适合快速，简单的形式，而反应性形式为复杂场景提供了更大的控制。 本文通过一个实践示例演示了这两种方法。

>

密钥概念：

利用模板驱动的形式，以易于和速度，以及用于复杂，高度控制形式的反应性形式。 > bootstrap集成：

用bootstrap简化样式，增强视觉吸引力而无需广泛的自定义。

直接在模板（template-drienden）中，>

使用Angular的验证器（例如，

，）或>实例化（反应性形式）。 requiredminlength表格提交处理：FormControl将事件绑定到有效数据捕获和处理的组件方法。>

>>动态形式管理：使用Angular的形式控制功能进行动态输入和验证调整，创建响应式用户体验。 ngSubmit

>先决条件： 对角的基本理解是有帮助的。 尽管并非严格要求，但熟悉JavaScript和Angular框架将增强您的理解。 要深入研究角度，请考虑使用有关构建具有角度的CRUD应用程序的SitePoint文章系列等资源。

设置：

>本教程使用Bootstrap进行样式。 这是整合它的方法：

> 安装bootstrap：

在您的项目目录中，运行

。

1. >>配置角cli：在您的npm install bootstrap@next文件中，添加样式表链接到bootstrap：

   >

2. import formsmodule：angular.json在

   中，import

   <code class="language-json">"styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ]</code>

   从
>：
3. >：

   > app.module.ts FormsModule@angular/forms>模板驱动的表单：

   <code class="language-typescript">import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       BrowserModule,
       FormsModule,
       // ... other imports
     ]
   })</code>

   对于快速公司注册表格，以基本表格标签开始：>

请注意，使用

创建模板参考变量的使用，然后将表单提交绑定到组件方法。 属性确保按钮不活动直到表单有效为止。

创建表单输入和验证：

>

<code class="language-html"><form>
  <!-- Form fields here -->
  <button class="btn btn-primary" type="submit">Submit</button>
</form></code>

对于公司名称输入字段：

<code class="language-json">"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css"
]</code>

此显示ngModel用于双向数据绑定，required>和minlength>验证器，以及基于companyName.touched>和companyName.errors>的条件错误显示。

>类似的方法适用于其他表单字段，例如行业下拉列表。 组件的打字稿将定义行业选项。

component's 方法： submitCompany

<code class="language-typescript">import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    // ... other imports
  ]
})</code>

反应性形式：

对于更复杂的帐户注册表格，反应性形式提供了更大的控制。

>导入ReactiveFormsModule：

在您的

中，来自>。 在组件中创建形式控件：app.module.tsReactiveFormsModule@angular/forms

在模板中形式：

<code class="language-html"><form>
  <!-- Form fields here -->
  <button class="btn btn-primary" type="submit">Submit</button>
</form></code>

形式输入字段：

错误处理类似于模板驱动的表单，但是使用

<code class="language-html"><input type="text" class="form-control" name="companyName" ngmodel required minlength="3">
<div companyname.errors>
  <div class="alert alert-danger">Company name is required</div>
  <div class="alert alert-danger">Company name must be at least {{ companyName.errors.minlength.requiredLength }} characters long</div>
</div></code>

等。可以使用自定义验证器和服务添加异步验证。

> 请记住调整代码片段以匹配您的特定表单字段和要求。 这种详细的解释为构建Angular的简单和复杂形式提供了坚实的基础。

以上是快速创建简单而强大的角形式的详细内容。更多信息请关注PHP中文网其他相关文章！