Question

我想从angular创建一个到我的后端服务的json帖子，为此，我创建了angular react形式：

<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类：

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

构造函数主要用于初始化类似于Javascript类的类的proeprtie。将响应式FormGroup类移动到ngOnInit中。访问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

使用表单生成器不需要import './styles/scss/style.scss'; 你可以试试这个

new FormControl()

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

无法访问反应性表单中的表单值

2 个答案: