如何在表单提交时滚动到第一个 ng-invalid 类

如何解决如何在表单提交时滚动到第一个 ng-invalid 类

我有一个看起来像这样的表格。我只希望用户在提交表单时滚动到第一个 ng-invalid 类。我如何使用 angular 的方式实现这一点。

          <div class="addressFormUI-base-formHeader">
            {{ "CONTACT DETAILS" | translate }}
          </div>
          <div class="addressFormUI-base-form addressList-base-removeMargin">
            <div class="inputV2-base-inputRow addressFormUI-base-inputRow">
              <mat-form-field
                floatLabel="auto"
                class="input-w"
                appearance="outline"
              >
                <mat-label>{{ "Name" | translate }}*</mat-label>

                <input
                  matInput
                  placeholder="{{ 'Name' | translate }}*"
                  formControlName="full_name"
                />
              </mat-form-field>
            </div>
            <div class="inputV2-base-inputRow">
              <mat-form-field
                floatLabel="auto"
                class="input-w"
                appearance="outline"
              >
                <mat-label>{{ "Mobile No" | translate }}*</mat-label>

                <input
                  formControlName="mobile"
                  matInput
                  placeholder="Mobile No"
                />
              </mat-form-field>
            </div>
          </div>
          <div class="addressFormUI-base-formHeader">
            {{ "ADDRESS" | translate }}
          </div>
          <div class="addressFormUI-base-form addressList-base-removeMargin">
            <div class="addressFormUI-base-pincodeBlock">
              <div class="addressFormUI-base-inputContainer">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label
                    >{{
                      "Street Address,P.O Box,Company Name,C/O" | translate
                    }}*</mat-label
                  >

                  <input
                    formControlName="address"
                    matInput
                    placeholder="{{
                      'Street Address,C/O' | translate
                    }}*"
                  />
                </mat-form-field>
              </div>
            </div>
            <div class="inputV2-base-inputRow addressFormUI-base-inputRow">
              <mat-form-field
                floatLabel="auto"
                class="input-w"
                appearance="outline"
              >
                <mat-label
                  >{{
                    "Apartment,Suite,Unit,Building,flour etc" | translate
                  }}.</mat-label
                >

                <input
                  matInput
                  formControlName="address_1"
                  placeholder="{{
                    'Apartment,flour,etc' | translate
                  }}."
                />
              </mat-form-field>
            </div>
            <div class="localityOptions-base-localityBlock" tabindex="-1">
              <div class="inputV2-base-inputRow">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "Locality / Town" | translate }}</mat-label>

                  <input
                    matInput
                    formControlName="landmark"
                    placeholder="{{ 'Locality / Town' | translate }}"
                  />
                </mat-form-field>
              </div>
            </div>
            <div class="addressFormUI-base-cityContainer">
              <div class="inputV2-base-inputRow addressFormUI-base-halfWidth">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "Country" | translate }}*</mat-label>

                  <input
                    formControlName="country_id"
                    matInput
                    placeholder="{{ 'Country' | translate }}*"
                  />
                </mat-form-field>
              </div>
              <div class="inputV2-base-inputRow addressFormUI-base-halfWidth">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "State / Province" | translate }}*</mat-label>

                  <input
                    matInput
                    formControlName="state_id"
                    placeholder="{{ 'State / Province' | translate }}*"
                  />
                </mat-form-field>
              </div>
            </div>
            <div class="addressFormUI-base-cityContainer">
              <div class="inputV2-base-inputRow addressFormUI-base-halfWidth">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "City" | translate }}*</mat-label>

                  <input
                    formControlName="city"
                    matInput
                    placeholder="{{ 'City' | translate }}*"
                  />
                </mat-form-field>
              </div>
              <div class="inputV2-base-inputRow addressFormUI-base-halfWidth">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "Zip code" | translate }}*</mat-label>

                  <input
                    formControlName="zip_code"
                    matInput
                    placeholder="{{ 'Zip code' | translate }}*"
                  />
                </mat-form-field>
              </div>
            </div>
          </div>
          <div class="addressFormUI-base-formHeader">
            {{ "SCHEDULE AVAILABILTIY" | translate }}
          </div>

          <div class="addressFormUI-base-form addressList-base-removeMargin">
            <div
              class="addressFormUI-base-cityContainer"
              *ngFor="let item of availability; let i = index"
            >
              <div class="inputV2-base-inputRow" style="width: 30%">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "WeekDay" | translate }}</mat-label>

                  <input
                    matInput
                    type="text"
                    [value]="item?.day"
                    disabled
                    placeholder="{{ 'Weekday' | translate }}"
                  />
                </mat-form-field>
              </div>
              <div class="inputV2-base-inputRow halfWidth">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "Time" | translate }}</mat-label>

                  <input
                    [ngModelOptions]="{ standalone: true }"
                    [value]="availability[i].opening_time"
                    [(ngModel)]="availability[i].opening_time"
                    matInput
                    type="time"
                    format="g:ia"
                    placeholder="{{ 'Time' | translate }}"
                  />
                </mat-form-field>
              </div>

              <div class="inputV2-base-inputRow halfWidth">
                <mat-form-field
                  floatLabel="auto"
                  class="input-w"
                  appearance="outline"
                >
                  <mat-label>{{ "Time" | translate }}</mat-label>

                  <input
                    matInput
                    [ngModelOptions]="{ standalone: true }"
                    type="time"
                    placeholder="{{ 'Time' | translate }}"
                    [value]="availability[i].closing_time"
                    [(ngModel)]="availability[i].closing_time"
                  />
                </mat-form-field>
              </div>
            </div>
          </div>
          <button type="submit">
            {{ "Add address" | translate }}
          </button>
        </form> 

这是我的提交功能的样子：

submit(): void {
    this.submitted = true;
    if (this._form.invalid) {
      return;
    }
    if (this.updateid) {
      var api = 'address/update/' + this.updateid;
    } else {
      var api = 'address/create';
    }
    this._form.value.availablity = this.availability;
    this.loading = true;
    this.unsubscribe$.add(
      this.request.POST(api,this._form.value).subscribe(
        (response) => {
          this.loading = false;
          if (response['status']) {
            this.snack.notify(response.message,2);
          } else {
            this.snack.notify(response.message,2);
          }
        },(err) => {
          this.loading = false;
          this.snack.notify(err.message,2);
        }
      )
    );
  } 

我在我的应用程序中使用服务器端渲染。我应该使用 elementRef 来实现这一点还是 viewchild 哪个更好？ 另外我如何使用 renderer2 实现这一点？