如何在ts组件中访问表格值-角度6

时间:2018-07-10 11:59:15

标签: angular forms typescript

我知道有很多答案可用,但是现在我没有安装角度6版本的表单值! 我添加了控制台屏幕截图 有人告诉我我错了。
HTML

<div class="container">
   <div class="row">
     <form (ngSubmit)="onSubmit(f)" #f="ngForm" class="jumbotron">
       <input class="form-control" type="text" name="fName" ngModel>
       <input class="form-control" type="text" name="lName" ngModel>
       <button type="submit" class="btn btn-primary">Add</button>
    </form>
  </div>
</div>

TS组件

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  arr: any[]=[];    
  onSubmit(form : NgForm) {
    this.arr = form.value
    console.log('array', this.arr);
    console.log('value', form.value);
   }
}

enter image description here

1 个答案:

答案 0 :(得分:0)

要查看对象的值,可以像这样对json进行美化:

onSubmit(form:NgForm ) {
    this.arr = form.value;
    console.log(JSON.stringify( this.arr));
    console.log(JSON.stringify( form.value));
   }

这将获取一个JSON对象字符串并返回其漂亮打印/格式化的