首页 文章

使用子组件中的表单元素会引发formControlName错误

提问于
浏览 次
0

节日快乐的家伙，

请耐心等待，因为英语是我的第三语言 .

我正在将一个JQuery驱动的应用程序移动到角度并陷入困境 . 有不同的报告相关模块依赖于日期，我想创建一个组件并导入到父组件 . 我的印象是调用子组件只是注入子组件模板中的任何内容，但我现在想（图片php的包含函数） .

The plunkr显示了我尝试过的基本安排 . 但基本上，我想在其他父组件中使用日期组件 . 对于例如在我的父组件中我有这个：

this.rForm = fb.group({
     'processedon': fb.group ({
        'datefilteroption' : [null, [Validators.required]],
        'dateportion' : [null, []],
        'date1': [null, []],
        'date2': [null, []]
      })
     });

在哪里，处理过的孩子是我孩子形式中定义的元素 . 子组件hmtl模板包含与它们匹配的formControlName（date1，date2等） . 我可以在同一输出中有更多的日期要求，因此可以扩展如下 . 这个想法是子组件保持不变，该组将用于从几乎任何地方操纵其组件 .

this.rForm = fb.group({
     'processedon': fb.group ({
        'datefilteroption' : [null, [Validators.required]],
        'dateportion' : [null, []],
        'date1': [null, []],
        'date2': [null, []]
      }),
     'paidbackon': fb.group ({
        'datefilteroption' : [null, [Validators.required]],
        'dateportion' : [null, []],
        'date1': [null, []],
        'date2': [null, []]
      })
     });

我现在得到的错误是“formControlName在使用子组件时必须与父formGroup指令一起使用” . 我试图在子组件中创建一个formGroup，但后来迫使我在表单中创建一个表单并且是错误的 .

我希望我的问题很清楚 .

angular

1 回答

  • 1

    解决问题的最简单方法是在子组件的 viewProviders 数组中提供 ControlContainer ：

    import { ControlContainer, FormGroupName  } from '@angular/forms';

@Component({
  selector: 'app-date-query',
  templateUrl: './date-query.component.html',
  ...
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupName  }
  ]
})
export class DateQueryComponent implements OnInit {

    Stackblitz Example

    也可以看看

    回复于

相关问题