angular7中模板驱动型表单的基本使用

﹏ヽ暗。殇╰゛Y 2022-01-31 03:13 228阅读 0赞

#### 模板驱动表单实例 ####

*  ngForm 在angular应用中，会自动的添加到每个表单，NgForm隐式的创建了一个FormGroup类的实例
 *  ngForm可以被一个模板本地变量引用，以便在模板中访问ngForm对象的实例。
 *  ngModel同样也可以被模板本地变量引用，代表一个formControl对象的实例。
 *  NgModelGroup:代表表单的一部分，可以将表单的一部分组合在一起，形成清晰的层次关系。

**使用模板驱动型表单首先需要在app.module.ts中引入FormsModule**

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

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
        <div>
            用户名：<input type="text" #username="ngModel" ngModel name="username">
        </div>
        <div>
            手机号：<input type="number" ngModel name="mobile">
        </div>
        <div ngModelGroup="passwordGroup">
            <div>
                密码：<input type="password" ngModel name="password">
            </div>
            <div>
                确认密码：<input type="password" ngModel name="pconfirm">
            </div>
        </div>
        <button>注册</button>
    </form>
    
    <div>
        {
       {myForm.value | json}} <br>
        {
       {username.value}}
    </div>

#### 模板驱动指令对应关系 ####

<table> 
 <thead> 
  <tr> 
   <th>属性指令</th> 
   <th>对应模型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>NgForm</td> 
   <td>FormGroup</td> 
  </tr> 
  <tr> 
   <td>NgModel</td> 
   <td>FormControl</td> 
  </tr> 
  <tr> 
   <td>NgModelGroup</td> 
   <td>FormGroup</td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular4的表单

Angular4的表单分为两种，一个是模板式表单，另一种是响应式表单。首先先讲一下数据模型：数据模型不是任意一种对象，是一种用于存储表单数据的数据结构。模板式表单

向右看齐/ 2022年06月05日 07:42/ 0 赞/ 193 阅读

相关 (十五)、Angular4.0 模板式表单

一、新建一个demo项目 ng new demo4 二、在demo4项目中新建一个组件 ng g component templateForm 三、表单

系统管理员/ 2022年05月28日 11:12/ 0 赞/ 168 阅读

相关细说 Angular 2+ 的表单（一）：模板驱动型表单（自义验证，实用、赞）

原文出处：[https://m.imooc.com/article/details?article\_id=19902][https_m.imooc.com_article_d

短命女/ 2022年05月05日 23:52/ 0 赞/ 296 阅读

相关 Angular表单

文章目录一、\[ngModelOptions\]="\{standalone: true\}" 是什么意思？为什么在我们的项目中使用ngModel的时

电玩女神/ 2022年02月17日 09:30/ 0 赞/ 208 阅读

相关 angular7表单的状态字段

touched 和 untouched 访问过和未访问过，获得焦点或者未获得焦点 <div> 用户名：<input type="text"

秒速五厘米/ 2022年01月31日 06:55/ 0 赞/ 195 阅读

相关 angular7中响应式表单校验

响应式表单校验（angular自带校验和自定义校验规则） import { Component, OnInit } from '@angular/core';

快来打我*/ 2022年01月31日 04:29/ 0 赞/ 265 阅读

相关 angular7响应式表单基本使用

案例1： \\使用响应式表单需要在app.module.ts中引入ReactiveFormsModule \\ `import { ReactiveFormsModul

素颜马尾好姑娘i/ 2022年01月31日 03:45/ 0 赞/ 235 阅读

相关 angular7中模板驱动型表单的基本使用

模板驱动表单实例 ngForm 在angular应用中，会自动的添加到每个表单，NgForm隐式的创建了一个FormGroup类的实例 ngForm可以被一个

﹏ヽ暗。殇╰゛Y/ 2022年01月31日 03:13/ 0 赞/ 229 阅读

相关 angular7+ngzorro响应式表单验证

使用响应式表单在开发的过程中，经常会用到。使用响应式表单的不仅能够提高开发效率，并且还能有效减少冗余的代码，在表单校验的时候也更方面，并且结合ngzorro进行表单校验效果更完

小咪咪/ 2022年01月10日 06:17/ 0 赞/ 463 阅读

相关 Angular 学习（十）：Angular 表单

Angular 表单什么是模板式表单表单的数据模型是通过组件模板中的相关指令来定义的，因为使用这种方式定义表单的数据模型时，我们会受限于 HTML 的语法，

红太狼/ 2021年09月29日 11:50/ 0 赞/ 588 阅读