How to validate just the ngmodel group in wizard step in driven form

See more:

form

AngularJs

Angular10

Hello every one i a using wizard step and i have a from and inside it i have ngmodelgroup i want to validate just ngmodelgroup before going to the next step i tried this but it doesn t work [disabled]="!f.clientgroup.valide"
i m working with angular driven form

form #AgentproForm="ngForm"
ngModelGroup="client"

What I have tried:

<div class="container">

     <form #AgentproForm="ngForm"
              (ngSubmit)="onSubmit(AgentproForm)">

          <aw-wizard>

               <aw-wizard-step [stepId]='0'awOptionalStep>

                          <h1>Information du client</h1>

                             <div ngModelGroup="client">

                           <div class="row justify-content-start">
                                    <div class="col-md-6">
                                    <div class="form-group">
                          <label for="name">Nom Complet</label>
                                     <input

                                     type="text" id="Nom"
                                     class="form-control"
                                     [(ngModel)]="model.nom_complet"
                                      name="Nom"
                                      #nom_complet="ngModel"
                                      [ngClass]="{
                                       'is-invalid':
                                         nom_complet.touched &&
                                         nom_complet.invalid }"
                                         required



                                                        />

                                    <div
                                     *ngIf="nom_complet.touched
                                      && nom_complet.invalid"
                                     class="invalid-feedback">
                                     <div
                                                            
                                  *ngIf="nom_complet.errors.required">Le
                                             Nom est
                                             obligatoire</div>
                                            </div>


                                                </div>
                                                

                                               

                                            <!- end col -->
                                        </div> <!-- end row -->
                                        <ul class="list-inline wizard mb-0">

                                            <li class="previous
                                                list-inline-item"><button
                                                    class="btn btn-primary"
                                                    awPreviousStep
                                                    type="button">Previous</button>
                                            </li>

                                            <li class="next list-inline-item
                                                float-right"><button
                                                    class="btn btn-primary"
                                                    [awGoToStep]="{ stepId: 1 }"
                                                    (click)="afficherdepot()"
                                                    type="button" [disabled]="!AgentproForm.client.valid">Stock</button>
                                            </li>
                                            <li id="exbtn" class="next
                                                list-inline-item
                                                float-right"
                                                style="margin-right: 32px;"><button
                                                    class="btn btn-primary"
                                                    [awGoToStep]="{ stepId: 2
                                                    }"
                                                    type="button"  [disabled]="!AgentproForm.client.valid"  >Externe</button>
                                            </li>

                                        </ul>
                                    </div> <!-- end of ngmodelgroup-->
                                </aw-wizard-step>