CODEWITHSUNDEEP
angularangular-reactive-forms
Adrian
Adrian

Reputation: 502

Cannot access to form values in Reactive forms

I want to create a json post to my backend service from angular, to do this I created angular reactive form:

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

my .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()
    })
  }
}

I looked on many tutorials and still dont know why this.proposalForm.name; is unresolved variable, so I cannot do this:

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

Upvotes: 0

Views: 2455

Answers (2)

Ivelin Markov
Ivelin Markov

Reputation: 1

Using form builder does not need new FormControl() You can try this

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

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

Upvotes: 0

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9754

Constructor is mainly used to initialize proeprtie of a class similar to Javascript class. Move Reactive FormGroup Class inside ngOnInit. To access FormGroup Control Values. You can use '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()
    })
  }
}

Template:

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

Upvotes: 1

Related Questions