自定义组件插值
Custom component Interpolation
我的自定义组件是:
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 returns 错误消息进行验证。
这是按预期工作的。
在我的要求中,我必须动态生成表单组和表单字段,并对其进行验证。
我能够创建表单组、字段和验证器。
表单控件名称将根据动态值进行替换。
<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}} 而不是实际值。
对于自定义组件,它会被替换吗?
你能帮我解决这个问题吗?
您正在制作它的字符串而不是使用该值。这样做
<app-validate
[errorInput]="isValid(attribute.attributeName, this.formGroup)"
[errorMessage]="displayErrorMessage(attribute.attributeName,'Enter as per validator ', this.formGroup)">
</app-validate>
这应该可以解决问题。
我的自定义组件是:
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 returns 错误消息进行验证。
这是按预期工作的。
在我的要求中,我必须动态生成表单组和表单字段,并对其进行验证。
我能够创建表单组、字段和验证器。
表单控件名称将根据动态值进行替换。
<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}} 而不是实际值。
对于自定义组件,它会被替换吗?
你能帮我解决这个问题吗?
您正在制作它的字符串而不是使用该值。这样做
<app-validate
[errorInput]="isValid(attribute.attributeName, this.formGroup)"
[errorMessage]="displayErrorMessage(attribute.attributeName,'Enter as per validator ', this.formGroup)">
</app-validate>
这应该可以解决问题。