Angular2 指令—表单指令

最新推荐文章于 2021-11-16 00:31:42 发布

原创最新推荐文章于 2021-11-16 00:31:42 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表单指令 #Angular2

Angular2 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Angular中用于处理表单的各种指令，包括NgForm、NgModel及其变体，以及ReactiveFormsModule模块中的指令如FormControlDirective等。这些指令简化了表单数据的处理流程，并提供了丰富的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单指令

表单指令包含了一系列在表单中使用的指令，这些指令被包含在下列三个模块中：
1. FormsModule
2. ReactiveFormsModule
3. InternalFormsSharedModule

FormsModule模块

NgForm

NgForm指令是表单的控制中心，负责处理表单内的页面逻辑，为普通的表单元素扩充了许多额外的特性。所有的表单指令都需要在NgForm指令内部才能正常

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

开发者可以不用在模板中显示使用NgForm指令，因为添加了FormsModule模块后，Angular模板在编译解析时，遇到标签会自动创建一个NgForm指令并且将其添加到该的标签上。

NgModel

NgModel指令是表单数据绑定的核心所在，是表单运用中最重要的一个指令，几乎所有的表单特性都依赖NgModel指令实现。NgModel指令实现了表单控件的数据绑定，表单的单向数据绑定使用了[ngModel],双向数据绑定使用[(ngModel)]

//单向数据绑定
<input type="text" [ngModel]="appTitle"/>
//双向数据绑定
<input type="text" [(ngModel)]="appTitle"/>

NgModelGroup

NgModelGroup 指令可以对表单输入的内容进行分组，方便我们在语义上区分不同类型的输入

<fieldset ngModelGroup="address">
    <legend>Address</legend>
    <div>
        Street: <input type="text" [(ngModel)]="person.address.country" name="country" #country="ngModel" required />
    </div> 
    <div>country ok : {{ country.valid }}</div>
</fieldset>

InternalFormsSharedModule模块中包含的指令
在表单章节中已经对上述几个表单指令将结果，这里也不再赘述。

ReactiveFormsModule模块

ReactiveFormsModule模块包含：

FormControlDirective

FormControlDirective指令可以将一个已有的表单组合绑定到一个DOM元素,下面示例中，将声明的nameControl绑定给一个输入元素，当输入元素的值发生变化时，nameControl的值也发生变化，同时nameControl的值发生变化，输入元素的值也发生变化。

import {Component} from '@angular/core';
import {NgForm, FormControl} from '@angular/forms';
@Component({
  selector: 'example-app',
  template: `
    <form>
      <input type="text" [formControl]="nameControl"/>
      <div>{{nameControl.value}}</div>
    </form>
  `,
})
export class SimpleFormComp {
  nameControl:FormControl=new FormControl('');
}

FormGroupDirective

FormGroupDirective可以将一个已有的表单组个绑定到一个DOM元素。

import {Component} from '@angular/core';
import {NgForm, FormControl, FormGroup} from '@angular/forms';
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="nameForm">
      <input type="text" formControlName="name"/>
      <div>{{nameForm.value|json}}</div>
    </form>
  `,
})
export class SimpleFormComp {
  nameForm:FormGroup;
  constructor(){
    this.nameForm=new FormGroup({
      name:new FormControl("")
    })
  }
}

FormControlName

FormControlName将一个已有的表单空间与一个DOM元素绑定，绑定时使用FormControlName指令为表单控件指定一个别名，这一指令作为FormGroupDirective指令的子元素使用。

<form [formGroup]="nameForm">
    <input type="text" formControlName="name"/>
    <div>{{nameForm.value|json}}</div>
</form>

FormGroupName

FormGroupName可以将已有的表单组合绑定到一个DOM元素上，它仅作为FormGroupDirective指令的子元素使用

import {Component} from '@angular/core';
import {NgForm, FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="myForm">
      <div formGroupName="name">
        <input type="text" formControlName="first"/>
        <input type="text" formControlName="last"/>
      </div>
    </form>
  `,
})
export class SimpleFormComp {
  myForm:FormGroup=new FormGroup({
    name:new FormGroup({
      first:new FormControl('qw',Validators.required),
      last:new FormControl('wq',Validators.required)
    })
  });

}

FormArrayName

FormArrayName指令可以将一个已有的表单数组绑定到一个DOM元素中，它仅作为FormGroupDirective指令的子元素使用。


import {Component} from '@angular/core';
import {FormArray, FormControl, FormGroup} from '@angular/forms';
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div formArrayName="cities">
        <div *ngFor="let city of arrayCities.controls; let i=index">
          <input [formControlName]="i" placeholder="City">
        </div>
      </div>
      <button>Submit</button>
    </form>
   {{form.value|json}}
    <button (click)="addCity()">Add City</button>
    <button (click)="setPreset()">Set preset</button>
  `,
})
export class SimpleFormComp {
  arrayCities:FormArray=new FormArray([
    new FormControl('SF'),
    new FormControl('NY')
  ]);
  form = new FormGroup({
    cities: this.arrayCities
  });
  addCity() { this.arrayCities.push(new FormControl()); }
  onSubmit() {
    console.log(this.arrayCities.value);
    console.log(this.form.value);
  }
  setPreset() { this.arrayCities.patchValue(['LA', 'MTV']); }
}

InternalFormsSharedModule

InternalFormsSharedModule模块是Angular的内部模块，FormsModule和ReactiveFormsModule模块中均引入了InternalFormsSharedModule模块，因此引入FormsModule和ReactiveFormsModule模块时，可以使用InternalFormsSharedModule模块包含的指令。FormsModule和ReactiveFormsModule模块包含的指令中包含三部分。