睿峰干货丨Web开发中表单的处理：Angular表单

Posted 2021-04-26 睿峰培训

 

上周二，小峰给大家分享了杨老师提供的（点击可查看），深受大家喜欢，今天小峰要分享的还是关于表单的内容：Angular中的表单。

 

AngularJS是Google 自己的 Web 开发框架，也叫 Angular，或者简称为 ng。Angular 刚一发布就引起了强烈的关注，它首次提出的“双向数据绑定”的概念受到了众多开发者的喜爱。在 Google 内部众多的产品都在使用 Angular，在国内，也有非常多的企业正在使用 Angular1.x 开发自己的应用，包括移动 APP，其中有很多行业巨头。所以作为一个Web前端开发工程师，掌握Angular 知识是很有必要的。

 

下面就是今天的Angular中的表单干货内容：

 

f.value：f就是FormGroup，而.value会以键值对的形式返回FormGroup中所有控件的值

 

input和ngModel指令：不带属性值的ngModel指令，指定单向数据绑定

 

组件类定义：

比如，doSubmit()函数的定义

 

src\app\app.module.ts

/*

 * Angular

 */

import { BrowserModule }

  from '@angular/platform-browser';

import { NgModule }

   from '@angular/core';

import {

  FormsModule,

  ReactiveFormsModule

} from '@angular/forms';

import { HttpModule }

    from '@angular/http';

 

@NgModule({

  declarations: [

    AppComponent,

   ......

    NotFoundComponent,

    UserComponent

  ],

  imports: [

    BrowserModule,

     FormsModule,

    ReactiveFormsModule,

    AppRouting,

    HttpModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

<form #signin="ngForm"

      (ngSubmit)="doSubmit(signin.value)"

      class="form-horizontal">

 

          <div>

            <div>

              <input type="email"

                     class="form-control"

                     id="email"

                     name="email"

                     ngModel />

            </div>

          </div>

          <div>

            <label for="password" class="col-sm-2 control-label">Password</label>

            <div>

              <input type="password"

                     class="form-control"

                     id="password"

                     placeholder="Password"

                     name="password"

                     ngModel />

            </div>

          </div>

          <div>

            <div class="col-sm-offset-2 col-sm-10">

              <div>

                <label>

                  <input type="checkbox"

                         id="rememberMe"

                          name="rememberMe"

                         ngModel /> Remember me

                </label>

              </div>

            </div>

          </div>

 

          <div>

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

            <button type="submit"

                     class="btn btn-primary">Sign in</button>

          </div>

        </form>

 

 

组件模板中

form和NgForm

 

input和NgModel 的应用

 

在模板文件firtobj\src\app\components\sign-in\sign-in.component.html中

 

<form #signin="ngForm"

   (ngSubmit)="doSubmit(signin.value)"

   class="form-horizontal">

<div>

<label for="email"

<div>

  <input type="email"

         class="form-control"

         id="email"

         name="email"

         ngModel />

</div>

</div>

<div>

<label for="password"

          class="col-sm-2 control-label">Password</label>

<div>

  <input type="password"

         class="form-control"

         id="password"

         placeholder="Password"

         name="password"

         ngModel />

</div>

</div>

<div>

<div class="col-sm-offset-2 col-sm-10">

  <div>

    <label>

      <input type="checkbox"

             id="rememberMe"

             name="rememberMe"

             ngModel /> Remember me

    </label>

  </div>

</div>

</div>

 

<div>

<button type="button"

        class="btn btn-default"

        data-dismiss="modal">Close</button>

<button type="submit"

        class="btn btn-primary">Sign in</button>

</div>

</form>

组件类定义在文件中 firtobj\src\app\components\sign-in\sign-in.component.ts：

比如，doSubmit()函数的定义

 

import { Component, OnInit }

from '@angular/core';

 

@Component({

  selector: 'app-sign-in',

  templateUrl: './sign-in.component.html',

  styleUrls: ['./sign-in.component.css']

})

export class SignInComponent

       implements OnInit {

 

  constructor() { }

  ngOnInit() {

  }

  doSubmit(formDataValue:any): void{

   console.log('You submitted value:',

                formDataValue);

  }

}

 

更多干货

1

2

3

4

5

‍

 新媒体课程免费啦，入学不缴费     

根据成都众多企业的需求，睿峰开设了新媒体运营课程免费学的优惠活动。  

优惠内容：免费入学，免费推荐工作，工作之后缴学费，无任何额外收费。 

课程大纲：一个月新媒体运营课程，再赠送一周SEO课程。 

开课时间：2017年9月11日 

 咨询：18202852911