Question

我正在开展角度4项目。其中，我使用了反应形式和角度验证。所有验证消息都显示在焦点外的字段上。但我想在提交按钮上显示验证消息。 Html代码：

<form [formGroup] = "addNewCustomerForm" (ngSubmit) = "submitAddNewCustomerForm()">
    <div class="form-group">
        <label>First Name</label>
        <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" placeholder="Ex: James" formControlName="first_name">
    </div>
    <small *ngIf="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small>
    <small *ngIf="addNewCustomerForm.controls['first_name'].hasError('pattern') && addNewCustomerForm.controls['first_name'].touched && !addNewCustomerForm.controls['first_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small>

    <div class="form-group">
        <label>Last Name</label>
        <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" placeholder="Ex: Lee" formControlName="last_name">
    </div>
    <small *ngIf="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small>
    <small *ngIf="addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small>

    <div class="form-group">
        <label>Email Address</label>
        <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" placeholder="Ex: example@xyz.com" formControlName="email_id" (focusin)="emailExist = false" (focusout)="checkEmailExistance($event)">
    </div>
    <small *ngIf="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid email.</small>
    <small *ngIf="addNewCustomerForm.controls['email_id'].hasError('pattern') && addNewCustomerForm.controls['email_id'].touched && !addNewCustomerForm.controls['email_id'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid email.</small>
    <small *ngIf="emailExist" class="alert-error"><i class="material-icons">error</i> This email already exists. Please try with different email.</small>
</form>

ts代码：

 this.addNewCustomerForm = this.formGroup.group({
        first_name           : [null, [Validators.required, Validators.pattern(this.regExpression)]],
        last_name            : [null, [Validators.required, Validators.pattern(this.regExpression)]],
        email_id            : [null, [Validators.required, Validators.pattern(this.emailPattern)]] });

submitAddNewCustomerForm(){
  if(this.addNewCustomerForm.valid)
  {
    console.log(this.addNewCustomerForm.value);
  }
 }

Answer 1

你有两个选择，

一： - 在提交函数中有一个布尔变量，如果表单无效则设置为true，并在错误块的ngIf条件中使用它。下面是一个相同的例子。

  submitAddNewCustomerForm(){
    if(this.addNewCustomerForm.invalid)
    {
      this.showError = true;
    }
  }

并在html错误中

 <small *ngIf="(showError || (addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched)) && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small>

第二个选项是使用

将每个控件标记为脏

this.controlName.markAsDirty()

或者

this.form.get('controlName').markAsDirty()

Answer 2

您也可以使用表单指令实现此功能，如图所示 here

对于提交的部分，请将模板参考添加到您拥有的其余部分：

<form .... #formDir="ngForm">

然后，您只需将formDir.submitted添加到if语句中，对于模糊功能，您只需检查该字段是否为touched。所以对于你的if语句，我会将实际的表单控件分配给一个变量，这样我们就可以缩短代码，这当然不是必需的，但为了便于阅读，我会这样做，例如使用变量构建表单后first_name：

this.firstNameCtrl = this.addNewCustomerForm.get('first_name');

然后在您的模板中，您可以执行以下操作来实现您的目标：

<small *ngIf="firstNameCtrl.hasError('required') && 
              (formDir.submitted || firstNameCtrl.touched) ">...</small>

如何对提交或模糊角度4的反应形式应用验证？

2 个答案: