Reactive forms in angular 6 returns null values

Question

I'm using reactive forms in angular 6 with ng2-archwizard

I have checked all the steps but the whole object filled with null values

what should I do ?! I have imported reactive form module to parent module and formGroup, FormControl to component ts file..

Welcome to stackoverflow! For us to help you, we would need to see the key pieces of code you are using to work with your form. Please edit your question and provide a bit of the HTML that is showing the form and the part of the component code that is building the form. (Please only provide the relevant bits of code.) Thanks! — DeborahK
Check out this useful read for new users stackoverflow.com/help/how-to-ask — Nathan Beck
@Ahmed I'm facing the same issue, did you resolve this issue? If yes, please share the solution. — LoRe

Rodolfo Franco Rodolfo Franco · Accepted Answer · 2019-02-07T18:47:39

In order to use reactive forms in Angular you need to first import the appropiate module onto your targeted module.ts file. E.g: app.module.ts this way:

@NgModule({
 declarations: [
  AppComponent
  .
  .],
 imports:[
  .
  .
  ReactiveFormsModule],
 entryComponents:[..],
 providers: []
 ....

Then your target component some.component.tsshould look something like this:

myForm = this.fb.group({
 field1:['',[Validators.required,...]],
 field2: ....
)};

constructor(private fb: FormBuilder, ...){}

Then in your html file some.component.html file you just show your form like this:

<form [formGroup]="myForm" (ngSubmit)="yourSubmitFunction(myForm)">
 <div>
  <input formControlName="field1" >
 </div>
 .
 .
 .
 <button type="submit">Submit</button>
</form>

Hope this helps you!.

Reactive forms in angular 6 returns null values

1 Answers