Question

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

到目前为止，我还尝试过手动禁用打字稿中的按钮，并通过[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();
  }

Answer 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

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

1 个答案: