Angular 反应式表单：当表单出错时显示错误文本

Question

我很难在表单的文本区域下显示错误消息。我有 custom-textarea，它是一个普通的 texarea 组件，具有一些方便的属性。其中之一是显示在文本框下方的帮助文本。我发现我的条件渲染逻辑没问题，尽管当特定错误发生时它没有显示在屏幕上。我的帮助文本的硬编码值有效，因此显示的文本没有问题。您知道这里可能存在什么问题吗？

<form [formGroup]="editForm" (ngSubmit)="editComment()">
    <custom-textarea
      formControlName="text"
      helper-text="{{!editForm.valid ? ((editForm.controls.text.errors?.['required'] ? 'Text for the comment is required!' : null) || (editForm.controls.text.errors?.['minlength'] ? 'Minimal length of text is 3 characters!' : null)) : null}}"
    ></custom-textarea>
</form>

export class EditCommentComponent implements OnInit {
@Input() comment: Comment;
editForm: FormGroup;
ngOnInit(): void {
    this.editForm = new FormGroup({
      text: new FormControl('', [Validators.required, Validators.minLength(3)]),
    });
}

ngOnChanges(): void {
    this.editForm.controls.text.setValue(this.comment.text);
  }

Answer 1

在您的 .html 文件中添加：

<form [formGroup]="editForm" (ngSubmit)="editComment()">
    <custom-textarea
      formControlName="text"
      helper-text="{{!editForm.valid ? ((editForm.controls.text.errors?.['required'] ? 'Text for the comment is required!' : null) || (editForm.controls.text.errors?.['minlength'] ? 'Minimal length of text is 3 characters!' : null)) : null}}"
    ></custom-textarea>
<span class="error invalid-feedback"
                  *ngIf="editForm.errors? && editForm.controls.text">Error in form</span>
</form>

我假设您正在使用 bootstrap 并且您可以使用此 class“错误 invalid-feedback”

Answer 2

对 helper-text 使用属性绑定。变化：

helper-text="{{!editForm.valid ? ((editForm.controls.text.errors?.['required'] ? 'Text for the comment is required!' : null) || (editForm.controls.text.errors?.['minlength'] ? 'Minimal length of text is 3 characters!' : null)) : null}}"

作者：

[helper-text] = "!editForm.valid ? ((editForm.controls.text.errors?.['required'] ? 'Text for the comment is required!' : null) || (editForm.controls.text.errors?.['minlength'] ? 'Minimal length of text is 3 characters!' : null)) : null"

这样，helper-text 属性将不再是静态的，而是动态的（检查 Angular Documentation on Property Binding）

Angular 反应式表单：当表单出错时显示错误文本

Angular reactive form: Displaying error text when form has error

angular

forms

conditional-statements

rendering

reactive