Angular 表单提交应被禁用，但单击时仍显示错误答案

【问题标题】：Angular Form Submit shall be disabled but still show error when clickedAngular 表单提交应被禁用，但单击时仍显示错误
【发布时间】：2019-08-07 02:31:12
【问题描述】：

我的目的是在 Angular 中创建一个表单。只要 !f.valid （表单无效），提交按钮就会被禁用。但是，一旦用户单击按钮，所有无效输入的背景颜色都会改变。此外，应在表单下方显示警报。

到目前为止，我还尝试在 typescript 中手动禁用按钮并通过 [class.myClass]="!f.valid" 更改背景颜色 - 但这会从一开始就更改背景颜色，因为表格还没有被触及，因此仍然无效。

总之，如果提交按钮被点击，表单只会改变无效输入的背景颜色。无论如何，在每个必需的输入字段都有效之前，提交按钮本身不会提交任何数据。

我的 HTML 表单：

<form class="w-50 mb-5 mt-5" (ngSubmit)="onSubmit(f)" #f="ngForm">
      <div class="form-group">
        <div class="form-row">
          <div class="col">
            <input type="text" name="name" class="form-control" placeholder="Name" ngModel required>
          </div>
          <div class="col">
            <input type="text" name="lastname" class="form-control" placeholder="Future Family Name" ngModel required>
          </div>
        </div>
      </div>
      <div class="form-group">
        <input type="email" name="email" class="form-control" placeholder="E-Mail" ngModel email required>
      </div>
      <div class="form-group">
        <input type="text" name="package" placeholder="Please choose a package from the selection above!" class="form-control" [(ngModel)]="selectedPackage" required readonly>
      </div>
      <div class="form-group">
        <input type="date" name="date" placeholder="When is your wedding?" class="form-control" ngModel required>
      </div>
      <div class="form-group">
        <textarea class="form-control" name="text" rows="4" placeholder="Your message.." ngModel></textarea>
      </div>
      <div class="w-100 d-flex justify-content-center">
        <div class="row">
          <div class="col-12 text-center">
            <span class="alert-info-display-none">Please fill in the required fields above.</span>
          </div>
          <div class="col-12 text-center mt-2" (click)="check(f)">
            <button type="submit" [disabled]="!f.valid">Send</button>
          </div>
        </div>
      </div>
    </form>

无济于事，但无论如何；打字稿：

@Input() selectedDiv: number;
  selectedPackage: string;

  onSubmit(form: NgForm): void {
    console.log(form);
  }

  changePackageInfo(): void {
    if (this.selectedDiv === 0) {
      this.selectedPackage = '';
    }
    if (this.selectedDiv === 1) {
      this.selectedPackage = 'You\'ve chosen Package One';
    }
    if (this.selectedDiv === 2) {
      this.selectedPackage = 'You\'ve chosen Package Two';
    }
    if (this.selectedDiv === 3) {
      this.selectedPackage = 'You\'ve chosen Package Three';
    }
  }

  public ngOnChanges(changes) {
    if ('selectedDiv' in changes) {
      this.changePackageInfo();
      }
    }

  constructor() { }

  ngOnInit() {
    this.changePackageInfo();
  }

【问题讨论】：

据我了解，您希望按钮可点击，但仅在表单有效时提交，否则显示错误消息？如果是这样，您可以让按钮始终提交（调用 onSubmit 函数），如果表单有效，则在 onSubmit 函数中提交，否则更改背景并显示警报...等。

标签： angular forms typescript

【解决方案1】：

您可以使用布尔变量来跟踪表单状态。仅在表单提交时设置此变量。并在模板上使用这个变量来控制错误的可见性。

在组件中：

  onSubmit(form: NgForm) {
    this.showError = form.invalid;
    if(form.invalid) return;
    // continue submission logic here.
  }

对应的模板用法

<div>
    <label for="email">
    <span style="color:red;font-weight:bold;">*</span>
      Email
    </label>
    <input 
        id="email" name="email" [(ngModel)]="emailText" 
        required #email="ngModel"
        [ngStyle]="{'background-color':showError && email.invalid ? 'red': ''}">
  </div>

您可以查看工作代码here

【讨论】：