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

json Object returned from formGroup

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

Answer 1

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