Nested Form | angular 6

i have the following HTML Form:

<form fxLayout="column" [formGroup]="setPaymentForm" autocomplete="off">
<div class="input-row" fxLayout="row">
<form class="example-form" [formGroup]="setPaymentClientName">
<mat-form-field class="example-full-width">
<input matInput placeholder="Client Name" formControlName="clientName" (ngModelChange) ="getSearchedClients()" aria-label="Clients" [matAutocomplete]="auto" [formControl]="paymt_client_ctrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let client of filteredClients | async" [value]="client.name">
<span>client.name</span> |
<small> phone: client.phone</small>
<small> | address: client.address</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<br>
</form>
</div>
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-form-field class="inputField" fxFlex>
<input matInput formControlName="payment_amount" placeholder="Payment Amount" type="text">
</mat-form-field>
</div>
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-checkbox[checked]='this.isCash' formControlName="isCash"> Cash</mat-checkbox>
</div>
<div class="modal-footer">
<button mat-raised-button name="addButton" (click)="submitPayment()" color="primary">Set Payment</button>
</div>
</form>


there are two forms outer form which is setPaymentForm and inner form i called it setPaymentClientName.

i want to get the data of the both form when submitting, so i made the following function:

submitPayment(){
this.setPaymentForm = this.fb.group(
clientName: [this.clientName, Validators.required],
payment_amount: [this.payment_amount],
isCash: [this.isCash]
);


but i am getting the following error once i open the form:

PaymentsComponent.html:23 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Example:


<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup(
firstName: new FormControl()
);


i am very new to angular 6, i get used to build my web projects with angularjs which is completely deiiferent than angular6. any help is appreciated.

auto-complete

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.