无法访问 Reactive 表单中的表单值

Question

我想从 angular 创建到我的后端服务的 json post，为此我创建了 angular 反应形式：

<div class="example-full-width">
<form class="example-form" [formGroup]="proposalForm" (ngSubmit)="onSubmit()" novalidate>
  <mat-form-field>
    <input matInput placeholder="name" formControlName="name">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="surname" formControlName="surname">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="city" formControlName="city">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="text" formControlName="text">
  </mat-form-field>
  <button class="btn btn-default" mat-button type="submit">Save</button>
</form>
</div>

我的.ts class:

import { Component, OnInit } from '@angular/core';
import {ProposalService} from "./proposal-service/proposal.service";
import {FormGroup, FormControl, FormBuilder} from '@angular/forms';

@Component({
  selector: 'app-proposal',
  templateUrl: './proposal.component.html',
  styleUrls: ['./proposal.component.scss']
})
export class ProposalComponent implements OnInit {


  proposalForm: FormGroup;

  constructor(private proposalService: ProposalService,private formBuilder: FormBuilder) {
    this.proposalForm=this.createFormGroup();
  }

  ngOnInit() {
  }
  onSubmit() {
  }

  createFormGroup() {
    return this.formBuilder.group({
      name: new FormControl(),
      surname: new FormControl(),
      city: new FormControl(),
      text: new FormControl()
    })
  }
}

我看了很多教程，仍然不知道为什么 this.proposalForm.name; 是未解析的变量，所以我不能这样做：

onSubmit() {
    let newProposal = new Proposal();
    newProposal.name=this.proposalForm.name;//unresolved variable
    this.proposalService.save(newProposal);
  }

Answer 1

构造函数主要用来初始化一个class的属性，类似于Javascriptclass。在 ngOnInit 中移动 Reactive FormGroup Class。访问 FormGroup 控件值。您可以使用 'this.proposalForm.value'.

import { Component, OnInit } from '@angular/core';
import {ProposalService} from "./proposal-service/proposal.service";
import {FormGroup, FormControl, FormBuilder} from '@angular/forms';

@Component({
  selector: 'app-proposal',
  templateUrl: './proposal.component.html',
  styleUrls: ['./proposal.component.scss']
})
export class ProposalComponent implements OnInit {


  proposalForm: FormGroup;

  constructor(private proposalService: ProposalService,private formBuilder: FormBuilder) {

  }

  ngOnInit() {
    this.proposalForm=this.createFormGroup();
  }
  onSubmit(formValues) {
    console.log(formValues);
  }

  createFormGroup() {
    return this.formBuilder.group({
      name: new FormControl(),
      surname: new FormControl(),
      city: new FormControl(),
      text: new FormControl()
    })
  }
}

模板：

    <div class="example-full-width">
<form class="example-form" [formGroup]="proposalForm" (ngSubmit)="onSubmit(proposalForm.value)" novalidate>
  <mat-form-field>
    <input matInput placeholder="name" formControlName="name">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="surname" formControlName="surname">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="city" formControlName="city">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="text" formControlName="text">
  </mat-form-field>
  <button class="btn btn-default" mat-button type="submit">Save</button>
</form>
</div>

Answer 2

使用表单生成器不需要new FormControl() 你可以试试这个

createFormGroup() {
  return this.formBuilder.group({
    name: [''],
    surname: [''],
    city: [''],
    text: ['']
  })
}

https://angular.io/guide/reactive-forms#step-3-generating-form-controls

无法访问 Reactive 表单中的表单值

Cannot access to form values in Reactive forms

angular

angular-reactive-forms