让我们开发一个 Angular 应用程序 – Angular 模板驱动表单

作者 : 慕源网 本文共4559个字,预计阅读时间需要12分钟 发布时间: 2022-01-17 共110人阅读

介绍

通过阅读本文,您将了解 Angular 模板驱动的表单方法。

我们将创建一个包含几个基本 html 控件的简单表单,并使用双向数据绑定来绑定数据。

我们还将学习如何将表单数据从组件模板传递到组件类。

创建一个简单的表单

让我们使用 Angular 模板驱动的方法创建一个简单的用户注册表单。

首先我们应该创建一个 Angular 项目

我们可以使用下面的 CLI 命令来创建一个 Angular 项目。

ng new our-project-name

如果您需要更详细地了解 Angular 应用程序架构和安装以及项目创建,您可以阅读我的以下文章:

接下来,让我们为 Angular 表单创建一个新组件。

请按照以下步骤创建组件。

  1. 打开项目
  2. 使用 ViewàTerminal 菜单或快捷键 Ctrl + `(反引号)打开 VS Code 终端
  3. 执行 CLI 命令 ‘ng generate component user-registration-form’
  4. 或者,我们也可以使用短语法“ng gc user-registration-form”。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

因此,我们已经成功创建了一个 Angular 应用程序和一个组件。

让我们通过使用“ng serve”命令运行它来测试我们的应用程序。

在此之前,删除“app.component.html”文件中的样板内容,并在其中添加新创建的组件指令。

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

让我们执行我们的应用程序

再次打开终端并执行 ‘ng serve – -open’ 命令

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

这里, open 属性会自动在浏览器中打开应用程序。否则,我们应该使用 url http://localhost:4200/打开页面

当我们在浏览器中打开应用程序时,我们将得到如下截图所示的结果。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

我们已经成功创建了创建 Angular 表单的基本要求。

安装Bootstrap

让我们安装引导程序以添加简单的bootstrap css classes。

执行cli命令npm install –save bootstrap

这将需要几秒钟来安装bootstrap 库。

然后在 Angular.json 文件中添加引导 css 文件路径

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

我们可以通过将简单的 css 类添加到按钮控件并在浏览器中检查结果来测试bootstrap 安装。

请在“user-registration-form.component.html”模板文件中添加一个按钮,如下图所示。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

如果我们的应用程序已经在运行,请在终端中按“Ctrl + C”停止它,然后使用 ng serve 命令重新运行以使引导样式适用于您的应用程序。

如果bootstrap 安装和配置正确,按钮将显示在浏览器中,如下图所示。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

导入表单模块

为了在我们的应用程序中使用 Angular 表单,我们应该从 @angular/forms 库中导入“FomsModule”。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

创建一个简单的 Angular 表单

让我们创建一个简单的表单。

打开 ‘user-registration-form.component.html’

首先添加一个 <form> 元素。然后我为我们的表单标题添加了一个 <h2> 元素。

然后我添加了 2 个文本框,如下图所示。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

在上面的 html 模板文件中,我只为它们添加了 2 个输入框和 2 个标签。

但是添加一些 div 元素和少量引导样式类会使文件有点庞大。但添加它们只是为了改善外观。

这里for=””属性与标签控件一起使用,如果我们单击标签,则将光标聚焦到相应的文本框。for 中指定的值是名字文本框的 id 值。

保存文件并在浏览器中检查结果。

结果将如下面的屏幕截图所示。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

我们可以添加更多控件来从用户那里获取更多信息。

不要担心bootstrap style classes。我们可以参考 bootstrap 文档来了解各种表单控件。

单击链接访问引导文档https://getbootstrap.com/docs/4.4/components/forms/

由于这是一个用户注册屏幕,我们需要提供一个选项来选择性别。

为此,我们可以使用单选按钮组。

要获取添加单选按钮组的bootstrap 语法,我们可以访问上面的链接。

我已经复制了单选按钮的 html 语句,并根据我的要求更改了 name id 等属性。

请参阅带有bootstrap style 的 html 语句。

<div class="form-check form-check-inline">    
    <input class="form-check-input" type="radio" name="gender" id="gender_Male" value="Male" checked>    
    <label class="form-check-label" for="gender_Male"> Male </label>    
 </div>    
 <div class="form-check form-check-inline">    
    <input class="form-check-input" type="radio" name="gender" id="gender_Female" value="Female" >    
    <label class="form-check-label" for="gender_Female"> Female </label>      
</div>   

然后我使用下面的 html 语句添加了下拉控件

我已经从bootstrap 文档站点复制了这些语句。

<div class="form-group">    
    <label for="paymentMode">Payment Mode</label>    
    <select class="form-control" id="paymentMode">    
        <option>Monthly</option>    
        <option>Quarterly</option>    
        <option>Yearly</option>    
    </select>    
</div>  

然后我添加了一个用于启用通知的复选框控件。

请参阅 html 语句以添加下面的复选框。

<div class="form-check">    
       <input class="form-check-input" type="checkbox" value="" id="enable_notification" name="notification" >    
       <label class="form-check-label" for="enable_notification"> Enable Notification  </label>    
</div>  
最后,我添加了一个按钮控件,如下所示。
<div class="form-group row">    
    <div class="col-sm-10">    
       <button type="button" class="btn btn-primary">Register</button>    
   </div>    
</div>  

现在我们的模板文件将如下面的截图所示。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

保存文件并检查浏览器。我们将得到如下截图所示的结果。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

如何访问表单控件值?

通过导入“FormsModule”库,Angular 使用“ngForm”指令控制表单。ngForm 是 Angular 内部的,它适用于所有表单。

当 Angular 处理模板并识别表单元素时,它会添加 ngForm 指令。我们永远不必自己添加它。

要了解更多信息,请访问https://angular.io/api/forms/NgForm

当 ngForm 指令与表单相关联时,Angular 将创建 ngForm 的一个实例。

要访问 ngForm 实例,我们可以使用模板引用变量。

例如,在表单标签内添加#userRegForm=”ngForm”。

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

现在我们可以使用 ‘userRegForm’ 访问表单实例。

让我们检查一下 userRegForm 的值。

在我们的模板文件中添加以下 2 个插值语句:

Type : {{userRegForm}}
{{userRegForm | json}}

请参考下面的截图:

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

保存文件并在浏览器中检查结果。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

正如我们在上面的截图中看到的,userRegForm 是一个对象。

在屏幕截图中,我们还可以看到 userRegForm 对象的属性。

我们可以使用这些不同的属性来控制我们的表单。

在这些属性中,重要的属性之一是 value { } 属性。

该属性用于存储表单控件值

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

但它将是空的,因为 Angular 不知道我们的控件。

使用 ngModel

为了让 Angular 了解控件,我们需要在每个控件中添加 ngModel 指令。

让我们在名称文本框中试试这个。请参考以下屏幕截图:

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

然后使用以下语句显示 value 属性。

{{userRegForm.value | json}}

这样我们就可以分别访问每个属性。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

保存文件并在浏览器中检查结果。

当我们在名称文本框中输入名称时,值属性也会发生变化。

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

让我们为其余的控件添加 ngModel。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

我们已经使用 ngForm 指令成功创建了一个 Angular 表单,并使用ngModel指令访问了表单控件值。

使用双向绑定管理表单数据

我们可以使用双向数据绑定从我们的组件类typescript 文件中访问表单控件值。

为此,让我们为我们的用户模型创建一个界面

  1. 在应用文件夹“data”中创建一个文件夹
  2. 创建typescript 文件并将其命名为 User.model.ts
  3. 打开 User.model.ts 文件并创建一个名为 ‘user’ 的接口

打开我们组件的typescript 文件’user-registration-form.component.ts’

创建一个用户类型的对象,如下图所示。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

接下来,我们需要将 registerUser 对象绑定到表单。

我们可以为此使用双向绑定。

将 ngModel 指令替换为 [(ngModel)] =”registerUser.name”[( )] 被称为 ‘Banana in the Box’ 语法。

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

然后,我们使用插值显示用户数据模型对象以验证 2 路绑定。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

保存屏幕并在浏览器中检查结果。

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

正如您在上面的屏幕截图中看到的,所有控件都使用两种方式绑定的组件类中的用户数据填充。

我们可以通过更改表单中的值来检查 2 路绑定。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

我们可以看到用户模型值随着表单控件的变化而变化。

将表单数据从模板传递到组件类

我们可以使用表单的模板引用变量“userRegForm”将表单数据传递给组件类。

我在组件类中创建了一个方法 register () ,其参数类型为“ngForm”,并将表单数据记录到控制台

请参考以下:

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

我们应该从 @angular/forms 导入 NgForm 类

从“@angular/forms”导入 { NgForm }

然后将 ngSubmit 事件添加到表单元素并将 register() 绑定到它。

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

然后,将按钮类型更改为“提交”并保存项目。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

要查看结果,请填写表单数据并单击注册按钮 。

然后打开浏览器控制台,我们将看到表单数据将被记录,如下图所示。

让我们开发一个 Angular 应用程序 - Angular 模板驱动表单

我们可以在模板类的 register() 方法中添加更多的逻辑来处理表单数据。

概括

在本文中,我们了解了 Angular 表单。

Angular 中有两种实现表单的方法。

它们是模板驱动的方法和反应形式。

在这里,我们了解了模板驱动的方法。这种方法很简单,适合创建登录表单等基本表单。

然后我们实现了双向数据绑定来传递用户数据。


慕源网 » 让我们开发一个 Angular 应用程序 – Angular 模板驱动表单

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录