Angular 4中如何获取Semantic Modal表单的值？

嘿，我一眼就看出问题所在啦——你的模板驱动表单里的输入框没和Angular的ngModel指令绑定，导致表单没法追踪输入的值，自然form.value里的属性全是undefined了。

问题根源 #

Angular的模板驱动表单（也就是你用的ngForm）必须通过[(ngModel)]指令把输入控件和表单关联起来，Angular才能收集、管理输入值。你现在只给输入框加了name属性，但没绑定ngModel，表单根本“看不到”这些输入框的存在。

修复步骤 #

1. 给输入框添加双向绑定
   修改你的模态框表单代码，给每个input加上[(ngModel)]：

   <div class="ui modal" id="newRoom">
     <div class="ui icon header">
       <i class="add square icon"></i> Add new Room
     </div>
     <div class="content">
       <form class="ui form" #form="ngForm" (ngSubmit)="addChatRoom(form)">
         <div class="field">
           <label>Name</label>
           <!-- 添加[(ngModel)]绑定 -->
           <input type="text" name="roomName" placeholder="Enter the room name" [(ngModel)]="chatRoomName">
         </div>
         <div class="field">
           <label>Description</label>
           <!-- 添加[(ngModel)]绑定 -->
           <input type="text" name="roomDescription" placeholder="Enter the description" [(ngModel)]="description">
         </div>
         <div class="actions">
           <button class="ui red cancel inverted button">
             <i class="remove icon"></i> Cancel
           </button>
           <button class="ui green ok inverted button" type="submit">
             <i class="checkmark icon"></i> Add
           </button>
         </div>
       </form>
     </div>
   </div>
   

   同时要在组件类里声明绑定的变量：

   import {Component, OnInit} from '@angular/core';
   import {HomeService} from './home.service';
   import {NgForm} from "@angular/forms";
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css']
   })
   export class HomeComponent implements OnInit {
     chatRooms: any;
     // 声明用于绑定的变量
     chatRoomName: string = '';
     description: string = '';
   
     constructor(public homeService: HomeService) { }
   
     ngOnInit() { }
   
     addChatRoom(form: NgForm) {
       // 现在可以正常获取值了
       const chatRoomName = form.value.roomName;
       const description = form.value.roomDescription;
       // 也可以直接用组件内的变量
       console.log(this.chatRoomName, this.description);
     }
   }
   

2. 确保导入FormsModule
   别忘了在当前组件所属的模块（比如AppModule）里导入FormsModule，模板驱动表单依赖这个模块才能工作：

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       // ...其他导入项
       FormsModule
     ]
   })
   export class AppModule { }
   

原理说明 #

[(ngModel)]是Angular的双向数据绑定语法，它会把组件变量的值同步到输入框，也会把用户的输入同步回组件变量。再配合name属性，Angular会把这个输入控件注册到ngForm实例中，这样form.value就能正确获取到每个控件的输入值了。

现在再提交表单，你就能拿到正常的chatRoomName和description值啦！

内容的提问来源于stack exchange，提问作者user8885733