如何在angular 4中将表单中的数据添加到JSON数组中？

这里有一个HTML代码（'signup.component.HTML'）。它从用户那里收集数据。我想将这些数据动态添加到JSON数组中

<div class="signup" *ngIf="!name; else forminfo">
    <form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)" name="myForm">
         <div class="form-container">
             <div class="row columns">
                 <h1>Signup</h1>
                 <label>First Name
                     <input type="text" formControlName="fname">
                 </label>
                 <label>Last Name
                     <input type="text"  formControlName="lname">
                 </label>
                 <label>E-Mail
                     <input type="text"  formControlName="email" name="email">
                 </label>
                 <label>Password
                     <input type="password"  formControlName="password1" name="password1">
                 </label>
                 <label>Confirm Password
                     <input type="password"  formControlName="password2" name="password2">
                 </label>
                 <input type="submit" class="button expanded" value="Submit Form" [disabled]="!rForm.valid" (click)="validateEmail()" >
             </div>
         </div>
     </form>
 </div>

报名
名字
姓
电子邮件
密码
确认密码

下面是我的typescript（'signup.component.ts'）。我有“fname”、“lname”、“email”和“password1”。 我想将这些数据存储到JSON数组中，以便以后访问它

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent {

    rForm: FormGroup;
    post:any;                     // A property for our submitted form
    lname:string = '';
    fname:string = '';
    email:string = '';
    password1:string = '';
    password2:string = '';
    constructor(private fb: FormBuilder) { 
        this.rForm = fb.group({
            'fname' : [null, Validators.compose([Validators.required])],
            'lname' : [null, Validators.compose([Validators.required])],
            'email' :[null, Validators.compose([Validators.required, Validators.minLength(4)])],
            'password1':[null, Validators.compose([Validators.required, Validators.minLength(4)])],
            'password2':[null, Validators.compose([Validators.required, Validators.minLength(4)])]
        });
    }
    addPost(post) {
        this.fname = post.fname;
        this.lname = post.lname;
        this.email = post.email;
        this.password1 = post.password1;
        this.password2 = post.password2;
    }
    validateEmail(){
        var x = document.forms["myForm"]["email"].value;
        var atpos = x.indexOf("@");
        var dotpos = x.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
            alert("Not a valid e-mail address");
            return false;
        }
        var password = document.forms["myForm"]["password1"].value;
        var confirmPassword = document.forms["myForm"]["password2"].value;
        if (password != confirmPassword) {
            alert("Passwords do not match.");
            return false;
        }
        return true;
    }
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
@组成部分({
选择器：“应用程序注册”，
templateUrl:'./signup.component.html'，
样式URL:['./signup.component.css']
})
导出类注册组件{
rForm:FormGroup；
post:any；//提交表单的属性
lname:string=''；
fname:string=''；
电子邮件：string=''；
password1:string=''；
password2:string=''；
构造函数（私有fb:FormBuilder）{
this.rForm=fb.group({
“fname”：[null，Validators.compose（[Validators.required]），
“lname”：[null，Validators.compose（[Validators.required]），
“电子邮件”：[null，Validators.compose（[Validators.required，Validators.minLength（4）]），
“password1:[null，Validators.compose（[Validators.required，Validators.minLength（4）]）]，
“password2:[null，Validators.compose（[Validators.required，Validators.minLength（4）]）]
});
}
addPost（post）{
this.fname=post.fname；
this.lname=post.lname；
this.email=post.email；
this.password1=post.password1；
this.password2=post.password2；
}
validateEmail（）{
var x=document.forms[“myForm”][“email”].value；
var atpos=x.indexOf（“@”）；
var dotpos=x.lastIndexOf（“.”）；
如果（atpos<1 | | dotpos=x.length）{
警报（“不是有效的电子邮件地址”）；
返回false；
}
var password=document.forms[“myForm”][“password1”].value；
var confirmPassword=document.forms[“myForm”][“password2”].value；
如果（密码！=确认密码）{
警报（“密码不匹配”）；
返回false；
}
返回true；
}
}

Angular的核心含义是双向数据绑定

问：这是什么意思

为了简化->你有.html和.ts文件。在html中，您有输入（如用户名），如果您开始在输入中键入用户名，则会自动更新.ts端的对象或变量。第二种方法是，如果您在.ts端更改该变量或对象，那么html也将被更新

因此，对于您的输入：

<input type="text" formControlName="fname">

---

Angular的核心含义是双向数据绑定

问：这是什么意思

为了简化->你有.html和.ts文件。在html中，您有输入（如用户名），如果您开始在输入中键入用户名，则会自动更新.ts端的对象或变量。第二种方法是，如果您在.ts端更改该变量或对象，那么html也将被更新

因此，对于您的输入：

<input type="text" formControlName="fname">

在

html中

<form [formGroup]="rForm" (ngSubmit)="addPost()" name="myForm">

在

html中

<form [formGroup]="rForm" (ngSubmit)="addPost()" name="myForm">

---

看看这个，它会消除你对被动角度表单的疑虑。你想知道你是如何从表单中获取数据的吗？在这种情况下，只需使用

this.rForm.value（）

看看这个，它将消除您对被动角度表单的疑虑。您想知道如何从表单中获取数据吗？在这种情况下，只需使用

this.rForm.value（）

 addPost() {

console.log(this.rForm.value);

  }