时间戳

首页 > 解决方案 > 动态字段的Angular 7表单验证

javascript - 动态字段的Angular 7表单验证

问题描述

我的表单包含 2 个复选框，如果我选择其中一个复选框，它将填充一个文本框（子问题）。在我的场景中，我有 2 个复选框和 2 个文本框和一个提交按钮。两个文本框都是必填字段。

如果用户在没有输入文本框的情况下提交表单，它应该显示错误消息。

让我们假设

用户选择第一个复选框，因此将填充文本框 1。然后用户填写 textbox1 并点击提交按钮，表单提交正常。

在我的场景中。

用户在提交表单后选择了第二个复选框，因此子问题带有错误消息。但我希望再次点击提交按钮后会出现第二个文本框错误消息。

请参阅stackblitz中的示例以获得更好的理解。

标签： javascriptangular6angular7angular-forms

解决方案

它显示消息是因为表单已经提交，并且基于 html 条件，它在提交之前显示错误消息。

提交表单后，您可以使用访问submit角度表单的属性，ViewChild并且可以将其设置为false. 希望这能解决您的问题

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  title = 'InputDirective';

  checkbox_a:boolean;
  checkbox_b:boolean;
  textbox1:string;
  textbox2:string;
  @ViewChild("angularForm", {static: false}) public angularForm: any;

  onSubmit() {
    alert('form submitted success..');
    this.angularForm.submitted = false;
  }

}

Stacblitz 链接 --> https://stackblitz.com/edit/angular-jjm3lq

推荐阅读