typescript 如何访问 ts 组件中的表单值 - angular 6

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/51264619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 05:31:44  来源:igfitidea点击:

how to access form value in ts component - angular 6

angularformstypescript

提问by Adeel

I know so many answer are available but I install angular 6 version now form value is not submitted! I add console screen shot blow any one tell me where I am wrong.
HTML

我知道有很多答案可用,但我现在安装了 angular 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 component

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

在此处输入图片说明

回答by Lulutho Mgwali

To see the values of the objects you can json prettifier it like so:

要查看对象的值,您可以像这样使用 json 修饰符:

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

This will take a JSON object string and return it pretty-printed/formatted

这将采用 JSON 对象字符串并以漂亮的打印/格式返回它