如何从普通按钮的点击事件中执行表单的提交？答案

【问题标题】：How to execute the submit of a form from the click event of a common button?如何从普通按钮的点击事件中执行表单的提交？
【发布时间】：2021-04-16 08:02:34
【问题描述】：

我有以下代码：

// HTML
<form #form="ngForm" [formGroup]='consumptionForm' (ngSubmit)="save()">
            <label class="txt-label">consumption</label>
                <span class="extra-info-txt">{{ consumptionCostObj.min }}</span>
                <mat-slider formControlName="costSelect" (input)="onCostChange($event)">
                </mat-slider>
                <span class="extra-info-txt">{{ consumptionCostObj.max }}</span>
                <input type="number" class="input-text" formControlName='costTxt'>
    </form>
    <my-button (click)="save()"></my-button>

// TS

@ViewChild('form') form: NgForm;

constructor...
this.consumptionForm = this.formBuilder.group({
      costSelect: [20, Validators.required]
      costTxt: [null, Validators.required]
});

save() {
   if (!this.consumptionForm.valid) return;  // | (!this.form.valid
   // SAVE FUNCIONTOS
}

我需要表单来执行提交，以便将表单的状态更改为“已提交”，以便我可以应用错误类。或者，如果做不到这一点，知道如何在不提交的情况下验证表单。

【问题讨论】：

标签： angular typescript forms validation

【解决方案1】：

您可以在不提交表单的情况下使用触摸和错误关键字。

在 HTML 中

<div class="col-4 pl-0 budget-limit">
    <input class="form-control input-control" 
                                    formControlName="budgetLimit"
                                    [ngClass]="(jobForm.controls.budgetLimit?.touched && jobForm.controls.budgetLimit?.errors)? 'is-invalid': ''">
                                <div class="invalid-feedback text-left"
                                    *ngIf="jobForm.controls.budgetLimit?.hasError('required')">
                                    * Limit amount is required
                                </div>
                                <div class="invalid-feedback text-left"
                                    *ngIf="jobForm.controls.budgetLimit?.hasError('pattern')">
                                    * Limit amount is invalid
                                </div>
                                <div class="invalid-feedback text-left"
                                    *ngIf="jobForm.controls.budgetLimit?.errors?.min">
                                    * Limit amount cannot be less than $5
                                </div>
                            </div>

在 ts 文件中

 jobForm: FormGroup;
  private fb: FormBuilder,

this.jobForm = this.fb.group({
      budgetLimit: this.fb.control(null, Validators.required)
    });

【讨论】：

谢谢，按下提交按钮后我需要验证