設(shè)置：

> 安裝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>模板驅(qū)動(dòng)的表單：

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

   對(duì)于快速公司注冊(cè)表格，以基本表格標(biāo)簽開始：>

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

創(chuàng)建表單輸入和驗(yàn)證：

<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用于雙向數(shù)據(jù)綁定，required>和minlength>驗(yàn)證器，以及基于companyName.touched>和companyName.errors>的條件錯(cuò)誤顯示。

component's 方法： submitCompany

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

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

對(duì)于更復(fù)雜的帳戶注冊(cè)表格，反應(yīng)性形式提供了更大的控制。

>導(dǎo)入ReactiveFormsModule：

中，來(lái)自>。 在組件中創(chuàng)建形式控件：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>

> 請(qǐng)記住調(diào)整代碼片段以匹配您的特定表單字段和要求。 這種詳細(xì)的解釋為構(gòu)建Angular的簡(jiǎn)單和復(fù)雜形式提供了堅(jiān)實(shí)的基礎(chǔ)。