1.引入表单

2.简单使用

参考地址：https://www.bilibili.com/video/BV1Wt411V7RC?p=6&spm_id_from=pageDriver

1.引入表单

2.简单使用

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms'

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {HeaderComponent} from './components/header/header.component';
import { FormComponent } from './components/form/form.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  form = {
    name: '',
    sex: "1",
    city: '',
    cityList: ['南昌', '梅州', '深圳'],
    loveList: [
      {title: '爬山', checked: true},
      {title: '篮球', checked: false},
      {title: '羽毛球', checked: true},
    ]
  }

  constructor() {
  }

  ngOnInit(): void {
  }

}

人员登记系统

  
  {{form | json}}

  

    
姓名：
    
性别：男
      女
    
    

      所在城市：
      
        {{item}}
      
    
    
兴趣爱好：
      
            {{item.title}}
         
    
  

h2 {
  text-align: center;
}

ul, li {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.people_list {
  text-align: center;
  border: 1px solid #dddddd;
  margin: 0px;
  padding: 20px;
}