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

系统管理员 2022-05-28 11:12 180阅读 0赞

**一、新建一个demo项目**

ng new demo4

**二、在demo4项目中新建一个组件**

ng g component templateForm

**三、表单由angular管理，简单模板式表单示例HTML --> template-form.component.html**

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

**四、template-form.component.ts 中定义一个简单的onSubmit方法，把传入的参数打印到控制台**

onSubmit(value: any) {
        console.log(value);
      }

**五、在app.component.html中使用template-form组件**

<app-template-form></app-template-form>

**六、启动项目，访问localhost:4200，查看简单模板式表单示例**

**七、重构模板表单，去处多余的代码**

<form #myFrom="ngForm" (ngSubmit)="onSubmit(myFrom.value)">
      <div>用户名:<input ngModel name="username" type="text"></div>
      <div>手机号:<input ngModel name="mobile" type="number"></div>
      <div ngModelGroup="passwordGroup">
        <div>密码:<input ngModel name="password" type="password"></div>
        <div>确认密码:<input ngModel name="pConfirm" type="password"></div>
      </div>
      <button type="submit">注册</button>
    </form>

发表评论取消回复

表情：

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

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

相关阅读

相关 Angular2响应式表单

本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面。 [原文地址。][Link 1] 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件。

缺乏、安全感/ 2022年06月16日 03:11/ 0 赞/ 201 阅读

相关 (十六)、Angular4.0 响应式表单

一、在demo4项目中新建reactiveForm组件 ng g component reactiveForm 二、3种api // FromC

向右看齐/ 2022年05月28日 11:18/ 0 赞/ 204 阅读

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

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

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

相关 (十七)、Angular4.0 响应式表单校验

一、在app下新建validator目录，创建一个ValidatorScript的ts类型文件，用来编写检验方法 import {FormControl, FormG

野性酷女/ 2022年05月27日 00:12/ 0 赞/ 229 阅读

相关 Angular表单

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

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

相关 angular7中响应式表单校验

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

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

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

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

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

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

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

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

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

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

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

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

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

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