Angular 8 学习（四注册小demo）

墨蓝 2024-04-17 15:11 63阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70][]

完成这样一个小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>
                             
                        </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);
       
      }
    
      
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/36f17e7992774ea98fc836befbb53176.png