找不到表单控件

Form control not found

我在 ngOnInit() 方法中创建了这个表单:

this.cardForm = this.fb.group({
    card_number: ['', Validators.required],
    holderName: ['', Validators.required],
    expiry: ['', Validators.required],
    cvc: ['', Validators.required],
    address_line1: ['', Validators.required],
    address_line2: ['', Validators.required],
    address_city: ['', Validators.required],
    address_state: ['', Validators.required],
    address_zip: ['', Validators.required],
    address_country: ['', Validators.required]
  });

在我的模板上:

<form [formGroup]="cardForm" novalidate="novalidate">
  <div class="form-group">
    <label for="cardnumber">Card number</label>
    <input 
      type="text"
      name="cardnumber"
      class="input-transparent form-control"
      formControlName="card_number"
      data-mask="9999-9999-9999-9999"
      placeholder="____-____-____-____"
      required="required">
 </div>

然而,我收到了这个错误:

ERROR Error: Cannot find control with name: 'card_number'

您的 input 标签中没有 id。 尝试插入

<input
    id="card_number"
   ...
>

更新1 如果您可以提供更多的代码,那将大有帮助。因为有一个 Validators.required 它应该有一个值。无论如何,只是一种预感 尝试在您的输入中使用它。

[formControl]="cardForm.controls['card_number']"

而不是

formControlName="card_number"

通话:

 this.cardForm = this.fb.group({...)} 

在构造函数中,而不是 ngOnInit()