<div class="card mb-10">
 <div class="card-body d-flex align-items-center py-8">

 <form id="kt_ecommerce_settings_general_form" class="form" >
 <!--begin::Row-->
 <div class="row row-cols-1 row-cols-sm-1 rol-cols-md-1 row-cols-lg-1">
 <!--begin::Col-->
 <div class="col">
 <!--begin::Input group-->
 <div class="fv-row mb-7">
 <!--begin::Label-->
 <label class="fs-6 fw-semibold form-label mt-3">
 <span class="required">Nombre</span>
 <i class="bi bi-info-circle-fill ms-1 fs-7" data-bs-toggle="tooltip"
 title="Enter the contact"s email."></i>
 </label>
 <!--end::Label-->
 <!--begin::Input-->
 <input formControlName="name"
 class="form-control form-control-solid" />
 <!--end::Input-->
 </div>
 <!--end::Input group-->
 <!--begin: : if de Error
 <div *ngIf="formAdd.get("name")?.touched && formAdd.get("name")?.errors?.["required"] || submitted && formAdd.controls.name.errors "
 class="alert alert-danger">Este campo es requerido </div>
 <div *ngIf="formAdd.get("name")?.touched && formAdd.get("name")?.errors?.["minlength"]"
 class="alert alert-danger">Es requerido minimo 3 caracteres</div>-->
 </div>
 <!--end::Col-->

 </div>
 <!--end::Row-->

 <!--begin::Action buttons-->
 <div class="d-flex justify-content-end">
 <!--begin::Button-->
 <button type="reset" data-kt-contacts-type="cancel" class="btn btn-light me-3">Cancelar</button>
 <!--end::Button-->
 <!--begin::Button-->
 <button type="submit" data-kt-contacts-type="submit" class="btn btn-primary">
 <span class="indicator-label">Guardar</span>
 <span class="indicator-progress">Espere...
 <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
 </button>
 <!--end::Button-->
 </div>
 <!--end::Action buttons-->
 </form>
 </div>