CODEWITHSUNDEEP
angularforms
Deepa Panicker
Deepa Panicker

Reputation: 347

How to get prefilled form field values in ngsubmit method?

I have a reactive form with 3 fields, two of the fields has default values and the fields are disabled to the user. User has to enter the value of third field and submit the form. When submitted, I only get the user entered value in form.value

  constructor(private fb: FormBuilder, private userService: UserService) { 
    this.signUpForm = fb.group({
      'name': ['John Doe', Validators.required],
      'email': ['[email protected]', Validators.required],
      'phone': [null, Validators.required]
    });
  }

When i console log form.value on ngsubmit method I get the output as

{phone: "123456"} phone: "123456" proto: Object

Upvotes: 0

Views: 93

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27303

If you are disabling the Formcontrol using disabled method, use getRawValue() method to get all the values include disabled controls

app.component.ts

  this.signUpForm = fb.group({
      'name': [{value:'John Doe', disabled:true}, Validators.required],
      'email': [ {value:'[email protected]', disabled:true}, Validators.required],
      'phone': [null, Validators.required]
    });

app.component.html

<form [formGroup]="signUpForm">
  <input formControlName="name">
  <input formControlName="email">
  <input formControlName="phone">
</form>
formValue:{{signUpForm.getRawValue() | json}}

ForMoreInfo

Example Stackblitz

Upvotes: 1

Related Questions