nz-form-item 标签中有两个nz-form-control时，当其中一个校验发生会同时触发另一个nzValidateStatus

[W-Abel-jia]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-8hacfn?file=src/app/app.component.ts

Steps to reproduce

在一个 nz-form-item 标签中有两个 nz-form-control 时,即如下：

模版文件：

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>Username</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="userErrorTpl">
      <input nz-input formControlName="userName" placeholder="please placeholder" />
      <ng-template #userErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please input your username!
        </ng-container>
      </ng-template>
    </nz-form-control>
    <nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
    <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
      <input nz-input formControlName="email" placeholder="email" type="email" />
      <ng-template #emailErrorTpl let-control>
        <ng-container *ngIf="control.hasError('email')">
          The input is not valid E-mail!
        </ng-container>
        <ng-container *ngIf="control.hasError('required')">
          Please input your E-mail!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzOffset]="7" [nzSpan]="12">
      <button nz-button nzType="primary" [disabled]="!validateForm.valid">Submit</button>
    </nz-form-control>
  </nz-form-item>
</form>

类文件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.less']
})
export class WelcomeComponent implements OnInit {
  validateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({
      userName: ['', [Validators.required]],
      email: ['', [Validators.email, Validators.required]],
    });
  }

  ngOnInit() {
  }

  submitForm(value: { userName: string; email: string; }): void {
    console.log(value);
  }

}

在页面上, userName 触发了required 错误的时候，email也会触发 nzValidateStatus 为 error; 当 userName 控件输入了正确的值以后，在email 输入不正确的值时，userName 也会触发 nzValidateStatus为 error;

这里必须要将这两个控件分别单独放在一个nz-form-item中就不会出现此问题。

What is expected?

userName 和 email 分别触发对应的nzValidateStatus

What is actually happening?

userName 和 email 相会触发对方的nzValidateStatus

Environment	Info
ng-zorro-antd	11.1.0
Browser	87.0.4280.88

[zorro-bot[bot]]

Translation of this issue:

When there are two NZ-Form-Control in the NZ-Form-Item tag, when one of the valides will trigger another NzValidateStatus

reproduction link

[https://stackblitz.com/Edit/ng- Zorro-antd-ivy-8hacfn?file=src/app/app.component.ts](https://stackblitz.com/edit/ng-zorro-antd- Ivy-8hacfn? file = src / app / app.component.ts)

steps to reproduce

There are two NZ-Form-Control in a NZ-Form-Item tag, that is, as follows:

Template file: `HTML <form nz-form [formgroup] = "Validateform" = "SubmitForm (ValidateForm.Value">

UserName Please Input your username! E-mail The Input Is Not Valid E-mail! Please Input your e-mail! Submit `` ` Class file: `` `` Import {component, oninit} from '@ Angular / Core'; Import {FORMBUILDER, FORMGROUP, VALIDATORS} from '@ Angular / Forms' @Component ({ Selector: 'App-Welcome', TemplateURL: './welcome.component.html', Styleurls: ['./welcome.component.less "] }) Export Class WelcomeComponent IMplements Oninit { Validateform: formgroup; Constructor (private fb: formbuilder) { THIS.VALIDATEFORM = this.fb.group ({ UserName: ['', [Validators.Required]], Email: ['', [Validators.email, Validators.Required], }); } ngoninit () { } SubmitForm (Value: {Username: String; email: string;}: void { Console.log (Value); } } `` ` On the page, UserName triggers the request error, Email also triggers NzValidateStatus to Error; When the UserName control enters the correct value, UserName will also trigger NzValidateStatus to Error when Email enters an incorrect value. This must be placed separately in a NZ-Form-Item, etc., this problem is required. ### What is expected? UserName and Email trigger the corresponding `` `nzvalidatestatus``` ### What is actually happens? Username and email trigger each other's `` `nzvalidatestatus``` | ENVIRONMENT | INFO | | --- | --- | | Ng-Zorro-ANTD | 11.1.0 | | Browser | 87.0.4280.88 |

[myopenresources]

https://github.com/myopenresources/cc-project 这个是用zorro开发的项目，需要的自己下

[danranVm]

nz-form-item 的 status 是由它的子组件 nz-form-control 控制的，因此一个 nz-form-item 中确实只应该有一个 nz-form-control 组件.

如果你需要一行内多个表单元素：

• 可以考虑使用 inline 布局，参考：https://ng.ant.design/components/form/zh#components-form-demo-horizontal-login
• 或者也可以如果栅格组件，参考：https://ng.ant.design/components/form/zh#components-form-demo-advanced-search

[W-Abel-jia]

nz-form-item的status是由它的子组件nz-form-control控制的，因此一个nz-form-item中确实只应该有一个nz-form-control组件。

如果你需要一行内多个表单元素：

• 可以考虑使用inline布局，参考：https ://ng.ant.design/components/form/zh#components-form-demo-horizo​​ntal-login
• 或者也可以如果上方组件，参考：https ://ng.ant.design/components/form/zh#components-form-demo-advanced-search

明白了，谢谢～