angular6 表单双向绑定(select、checkbox、radio、input)

文章参考

1. angular 常用模块
2. angular2如何双向绑定多个checkbox？
   

如果不引入该模块，会出现编译器不报错，但是浏览器不显示内容的奇怪现象

引入 FormsModule

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

案例

项目模块中引入 FormsModule

/**
 * 告诉angular 如何组装应用
 */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpClientModule }   from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './page/header/header.component';
import { NewsComponent } from './page/news/news.component';
import {StorageService} from './page/service/storage.service'
import { AppRoutingModule }     from './router/app-routing.module';
import { HttpdemoComponent } from './page/httpdemo/httpdemo.component';

//@NgModule 装饰器将AppModule标记为Angular 模块类（也叫做 NgModule类）
// @NgModule 接收一个元数据对象，告诉Angular 如何编译和启动应用
@NgModule({
  // 引入当前项目运行的组件，自定义组件都需要引入并且在这里声明
  // 依赖注入
  declarations: [
    AppComponent,
    HeaderComponent,
    NewsComponent,
    HttpdemoComponent
  ],
  // 当前项目依赖哪些模块
  imports: [
    BrowserModule,
    HttpClientModule,
    // 如果要引入双向绑定，则需要引入FormModule
    FormsModule,
    AppRoutingModule
  ],
  // 定义服务
  providers: [
    StorageService
  ],
  // 默认启动哪个组件
  bootstrap: [AppComponent]
})

// 根模块不需要导出任何东西，因为其他组件不需要导入根模块，但是一定要写
export class AppModule { }

HTML 使用[(ngModel)]

<div>
    <div>
        <span>
            姓名 ：
        span>
        <span>
            <input [(ngModel)]="username" />
        span>
        <span>
            {{username}}
        span>
    div>
    
    <div>
        <span>
            性别 ：
        span>
        <span>
            <input type="radio" value='girl' [(ngModel)]="sex" /> 女
            <input type="radio" value='boy' [(ngModel)]="sex" /> 男
        span>
        <span>
            {{sex}}
        span>
    div>

    <div>
        <span>
            专业 ：
        span>
        <span>
            <select [(ngModel)]="professional">
                <option>weboption>
                <option>javaoption>
                <option>phpoption>
            select>
        span>
        <span>
            {{professional}}
        span>
    div>

    <div>
        <span>
            爱好 ：
        span>
        <span>
            <span  *ngFor='let hobby of hobbiesOption'>
                <input type='checkbox' [value]="hobby.value" [(ngModel)]='hobby.isChecked' /> {{hobby.name}} 
            span>
            
            
        span>
        <span>
            {{hobbiesOption | json}}
        span>
    div>

    <div>
        <button (click)="getFormAction()">
            获取表单数据
        button>
    div>
div>

组件中定义好数据

import { Component, OnInit } from '@angular/core';

interface Hobby {
  name: string,
  value: string,
  isChecked: boolean
}

@Component({
  selector: 'app-form-model',
  templateUrl: './form-model.component.html',
  styleUrls: ['./form-model.component.scss']
})
export class FormModelComponent implements OnInit {
  username: string;
  sex: string;
  professional: string;
  age: number;
  isMarried: boolean;
  hobbiesOption: Hobby[];
  hobbies: string[];

  constructor() { 
    this.username = 'zhangsan';
    this.age  = 18;
    this.isMarried = true;
    this.professional = 'web';
    this.sex = 'girl';
    this.hobbiesOption = [
      {name: '足球', value: 'football', isChecked: false},
      {name: '篮球', value: 'basketball', isChecked: false},
      {name: '乒乓球', value: 'pingpang', isChecked: false},
    ]
  }

  ngOnInit() {
  }

  getFormAction () {
    console.log('this.username : ' + this.username);
  }
}

1. checkbox 只能是改为true 或者 false，因此这里需要定义复杂对象，改变其中一个属性