自定义组件插值答案

【问题标题】：Custom component Interpolation自定义组件插值
【发布时间】：2021-07-27 04:01:22
【问题描述】：

我的自定义组件是：

Template:
=============

<div *ngIf="!errorInput">
    <div>
        {{ errorMessage }}
    </div>
</div>

Component
===========

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-validate',
  templateUrl: './form-validate.component.html',
  styleUrls: ['./form-validate.component.css'],
})
export class FormValidateComponent implements OnInit {
  @Input() errorMessage: string;
  @Input() errorInput: boolean;

  constructor() {}

  ngOnInit(): void {}
}

我正在使用上面来验证表单并显示验证错误消息。

我使用这个自定义组件如下

 <label>Description</label>
<input type="text" formControlName="description" pInputText
    style="border-color: black;">

<app-validate
    [errorInput]="isValid('description', this.formGroup)"
    [errorMessage]="displayErrorMessage('description','Enter description', this.formGroup)">
</app-validate>

isValid 方法根据 Validator 进行验证，displayErrorMessage 返回错误信息。

这是按预期工作的。

在我的要求中，我必须动态生成表单组和表单字段，并对其进行验证。

我能够创建表单组、字段和验证器。

表单控件名称将根据动态值进行替换。

<div class="col-md-6"
    *ngFor="let attribute of attributeList; let attributeLength = count; let attributeCount = index;">

    <label> {{attribute.attributeName}}</label>

    <input type="text" formControlName="{{attribute.attributeName}}" pInputText
    style="border-color: black;">

    <app-validate
    [errorInput]="isValid('{{attribute.attributeName}}', this.formGroup)"
    [errorMessage]="displayErrorMessage('{{attribute.attributeName}}','Enter as per validator ', this.formGroup)">
    </app-validate>


</div>

在上面的代码中，{{attribute.attributeName}} 被正确替换，除了以下代码


   <app-validate
    [errorInput]="isValid(**'{{attribute.attributeName}}'**, this.formGroup)"
    [errorMessage]="displayErrorMessage(**'{{attribute.attributeName}}'**,'Enter as per validator ', this.formGroup)">
   </app-validate>

如果我记录 isValid 的第一个参数，我得到的是 {{attribute.attributeName}} 而不是实际值。

对于自定义组件，是否会被替换？

你能帮我解决这个问题吗？

【问题讨论】：

实际值是什么意思？你期待/希望发生什么？
将属性对象的属性名称视为“测试属性”。我期待“测试属性”，但我得到了字符串 {{attribute.attributeName}}。表示该值没有被替换

标签： angular angular-directive

【解决方案1】：

您正在制作一个字符串而不是使用该值。这样做

<app-validate
    [errorInput]="isValid(attribute.attributeName, this.formGroup)"
    [errorMessage]="displayErrorMessage(attribute.attributeName,'Enter as per validator ', this.formGroup)">
</app-validate>

这应该可以解决问题。

【讨论】：