Question

我有一个通用组件，如下所示，

// selector: 'app-text-box'
<form>
   <input type="text" 
    [name]="data.name"
    [id]="data.name"/>
</form>
<error-message [message]="message"></error-message>

我的应用程序组件也如下所示，

<div *ngFor="let data of jsonData | async">

  <app-text-box [data]="data"
            *ngIf="data.type === 'TEXT'">
  </app-text-box>

</div>

然后是我的json

[
 {
    "type": "TEXT",
    "name": "book"
 },
 {
    "type": "TEXT",
    "name": "note"
 }
]

基于上述json，如果我想验证两个输入字段，然后显示相应输入字段的错误，则应用程序组件将对其进行迭代并呈现输入框。我不知道如何使用表格来处理它？

Answer 1

在您的父母app-component说

中创建一个表单对象

myForm : FormGroup

constructor(private fb : FormBuilder) {
   this.myForm = this.fb.group({});
}

，然后将其作为输入传递给子组件。

因此您必须在子组件中声明@Input() myForm : FormGroup

父项

<form [formGroup]="myForm">
     <app-text-box [data]="data" [myForm]="myForm"
            *ngIf="data.type === 'TEXT'">
     </app-text-box>
</form>   
{{myForm.valid}} -- prints true or false

在您的子组件中，将输入控件添加到父级传递的同一表单组中

constructor(fb : FormBuilder) {
     // add input controls to the same form group
    this.myForm.addControl('someName', new FormControl(data.name, Validators.required))
}

子组件

 <form [formGroup]="myForm">
   <input type="text" 
    [formControlName]="someName"
    [id]="data.name"/>
</form>
<error-message [message]="message"></error-message>

Angular 5表单验证和通用组件中的显示错误

1 个答案: