Question

下面的表单（使用清晰表单）是对话框的一部分：

<form clrForm
     clrLayout="horizontal"
     [formGroup]="editRecipientForm">
   <clr-input-container>
       <label>First Name</label>
       <input clrInput
              type="text"
              formControlName="firstName" />
       <clr-control-error>Field cannot be empty</clr-control-error>
   </clr-input-container>
   <clr-input-container>
       <label>Last Name</label>
       <input clrInput
              type="text"
              formControlName="lastName" />
       <clr-control-error>Field cannot be empty</clr-control-error>
   </clr-input-container>
</form>

它将在以下功能的帮助下打开：

onEditRecRow() {
    this.editRecipientForm = new FormGroup({
      ID: new FormControl({value: this.recSelectedList[0].ID, disabled: true}, Validators.required),
      firstName: new FormControl(this.recSelectedList[0].firstName, Validators.required),
      lastName: new FormControl(this.recSelectedList[0].lastName, Validators.required),
      emailID: new FormControl(this.recSelectedList[0].emailID, [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")])
    });

    this.editRecipientDialog = true
  }

如果任何Form Control无效，那么清晰度可以帮助我提示错误消息。

我还希望在保存所有在对话框中所做的更改后再次检查所有窗体控件，这是通过以下方式进行的：

  @ViewChild('ClrForm', {static: true}) clrForm;
  .
  .
  .
  onUpdateRecipient() {
    if (this.editRecipientForm.invalid) {
      this.clrForm.markAsTouched();
      console.log('Error There');
    } else {
      console.log('Recipient Updated');
    }    
  }

但是@ViewChild返回的clrForm是未定义的。

谢谢。

Answer 1

尝试

int?[,]

从@ViewChild(ClrForm, {static: true}) clrForm;的语句中删除'（单引号）

更新（感谢@hippeelee）

@ViewChild

Answer 2

可能是您在模板上未正确引用clrForm吗？

尝试<form #ClrForm clrLayout="horizontal" [formGroup]="editRecipientForm"> <clr-input-container>

https://angular.io/api/core/ViewChild

@ViewChild在使用Angular Forms时返回未定义

2 个答案:

更新（感谢@hippeelee）