# Angular 表单、Dom 获取表单值、以及双向数据绑定

  1. ng new angulardemo04
  2. ng g component components/form
  3. app.module.ts
    import {FormsModule} from '@angular/forms'
    @NgModule({
      declarations: [
        AppComponent,
        FormComponent
      ],
      imports: [
        BrowserModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  4. app.component.html
    <app-form></app-form>
    
  5. style.scss
    /* You can add global styles to this file, and also import other style files */
    *{
        margin: 0px;
        padding: 0px;
    }
    ul, ol{
        list-style-type: none;
    }
  6. form.components.ts
    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-form',
      templateUrl: './form.component.html',
      styleUrls: ['./form.component.scss']
    })
    export class FormComponent implements OnInit {
      public peopleInfo:any = {
        username: 'Jalen',
        sex: '2',
        cityList: ['北京', '上海', '深圳'],
        city: '北京',
        hobby:[{
          title: '吃饭',
          checked: false
        },{
          title: '睡觉',
          checked: false
        },{
          title: '敲代码',
          checked: true
        }],
        mark: ''
      }
      constructor() { }
      ngOnInit(): void {
      }
      doSubmit(e:any){
        //1.jquery dom 操作
        // let nameDom:any = document.getElementById("username")
        // alert(nameDom.value)
        //2. 双向数据绑定
        console.log(this.peopleInfo)
      }
    }
  7. form.component.scss
    h2{
        text-align: center;
    }
    .people_list{
        width: 400px;
        margin: 40px auto;
        
        padding: 20px;
        border: 1px solid #eee;
        li{
            height: 50px;
            line-height: 50px;
            .form_input{
                width: 300px;
                height: 30px;
            }
        }
        .submit{
            width: 100px;
            height: 30px;
            float: right;
            margin-right: 50px;
            margin-top: 70px;
        }
        .pre-view{
            margin-top: 30px;
        }
    }
  8. form.component.html
    <h2>人员登记系统</h2>
    <div class="people_list">
        <ul>
            <li>姓 名:
                <input type="text" id="username" [(ngModel)]="peopleInfo.username" value="form_input"/>
            </li>
            <li>性 别:
                <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"/><label for="sex1"></label>
                &nbsp;&nbsp;
                <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"/><label for="sex2"></label>
            </li>
            <li>城 市:
                <select name="city" id="city" [(ngModel)]="peopleInfo.city">
                    <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
                </select>
            </li>
            <li>爱 好:
                <span *ngFor="let item of peopleInfo.hobby;let key=index">
                    <input type="checkbox" [id]="'check' + key" [(ngModel)]="item.checked"/><label [for]="'check' + key">
                        {{item.title}}
                    </label>
                    &nbsp;&nbsp;
                </span>
            </li>
            <li>备 注:
                <!-- <input type="textarea" name="mark" id="mark" [(ngModel)]="peopleInfo.mark" cols="30" rows="10"/> -->
                <textarea name="mark" id="mark" [(ngModel)]="peopleInfo.mark" rows="4" cols="50"></textarea>
            </li>
        </ul>
        <button (click)="doSubmit($event)" class="submit">获取表单的内容</button>
        <br>
        <br>
        <pre class="pre-view">
            {{peopleInfo | json}}
        </pre>
    </div>