Angular 8 学习 （四 注册小demo）

 

完成这样一个小demo

前端页面

<h1>用户注册</h1>


<div class="regist">
    <ul>
        <li>
            姓 名：<input type="text" [(ngModel)]="peopleInfo.username" class="form_input">
        </li>
        <li>
            性 别：<input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"><label for="sex1">男</label>       
                  <input type="radio" value="0" 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;
                    </span>
        </li>
        <li>
            备  注：
                  <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
        </li>
    </ul>

    <button (click)="doSubmit()" class="submit" >获取表单内容</button>

    <br>
    <br><br><br><br><br>
    <pre>
        {{peopleInfo|json}}
    </pre>
</div>

后端页面

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:'',
    sex:"1",
    cityList:["北京","上海","深圳","广州","杭州"],
    city:"北京",
    hobby:[{
      title:"吃饭",
      checked:false
    },{
      title:"睡觉",
      checked:false
    },{
      title:"打豆豆",
      checked:false
    },{
      title:"我爱豆豆",
      checked:false
    }],
    mark:""
  }

  constructor() { }

  ngOnInit() {
  }

  doSubmit(){
    /**
     * 原生js获取
     *   let usernameDmo:any = document.getElementById("username");
          alert(usernameDmo.value);
     * 
     */
  //  alert(this.peopleInfo.username);
   // console.log(this.peopleInfo);

   // alert(this.peopleInfo.sex);
    //console.log(this.peopleInfo);

 //   alert(this.peopleInfo.city);
    console.log(this.peopleInfo);
   
  }

  
}