快速創建簡單而強大的角形式

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

   "styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ]

   從
>：
3. >：

   > app.module.ts FormsModule@angular/forms>模板驅動的表單：

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       BrowserModule,
       FormsModule,
       // ... other imports
     ]
   })

   對於快速公司註冊表格，以基本表格標籤開始：>

請注意，使用

創建模板參考變量的使用，然後將表單提交綁定到組件方法。 屬性確保按鈕不活動直到表單有效為止。

創建表單輸入和驗證：

>

<form #companyForm="ngForm" (ngSubmit)="submitCompany(companyForm.value)">
  <!-- Form fields here -->
  <button class="btn btn-primary" type="submit" [disabled]="!companyForm.valid">Submit</button>
</form>

對於公司名稱輸入字段：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css"
]

此顯示ngModel用於雙向數據綁定，required>和minlength>驗證器，以及基於companyName.touched>和companyName.errors>的條件錯誤顯示。

>類似的方法適用於其他表單字段，例如行業下拉列表。 組件的打字稿將定義行業選項。

component's 方法： submitCompany

import { FormsModule } from '@angular/forms';

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

反應性形式：

對於更複雜的帳戶註冊表格，反應性形式提供了更大的控制。

>導入ReactiveFormsModule：

在您的

中，來自>。 在組件中創建形式控件：app.module.tsReactiveFormsModule@angular/forms

在模板中形式：

<form #companyForm="ngForm" (ngSubmit)="submitCompany(companyForm.value)">
  <!-- Form fields here -->
  <button class="btn btn-primary" type="submit" [disabled]="!companyForm.valid">Submit</button>
</form>

形式輸入字段：

錯誤處理類似於模板驅動的表單，但是使用

<input type="text" class="form-control" name="companyName" ngModel #companyName="ngModel" required minlength="3">
<div *ngIf="companyName.touched && companyName.errors">
  <div class="alert alert-danger" *ngIf="companyName.errors.required">Company name is required</div>
  <div class="alert alert-danger" *ngIf="companyName.errors.minlength">Company name must be at least {{ companyName.errors.minlength.requiredLength }} characters long</div>
</div>

等。可以使用自定義驗證器和服務添加異步驗證。

> 請記住調整代碼片段以匹配您的特定表單字段和要求。 這種詳細的解釋為構建Angular的簡單和復雜形式提供了堅實的基礎。

以上是快速創建簡單而強大的角形式的詳細內容。更多資訊請關注PHP中文網其他相關文章！