當 FormGroup 傳遞給子組件時，FormControlName 必須與父 FormGroup 指令一起使用

Question

父組件

  <form [formGroup]="User">
    
    <app-radioButton [group]="user"></app-radiobuton>
    
    </form>

在無線電組件 html

<mat-radio-button  [formControlName]="name" > <mat-radio-button>

無線電組件的 in.ts

export class RadioComponent{
@Input() group: FormGroup;
}

如上給出錯誤。 不知道我在做什么錯。

Answer 1

之所以失敗，是因為 Angular 正在等待任何父子元素上的 FormGroupDirective。 所以：

在子組件中請聲明：

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})

或者

您可以在子組件中使用 formControl：

<mat-radio-button  [formControl]="name" > <mat-radio-button>

Answer 2

在您的代碼中有[formGroup]="User"並傳遞給子組件[group]="user" 。 為什么提供不同的數據： User和user ？

如果您想按照您的方式使用您的FormGroup ，只需將您的表單組包裝為子組件中的子控件：

<ng-container [formGroup]="group">
  <mat-radio-button [formControlName]="name"><mat-radio-button>
</ng-container>

另一種方法是制作更合適的組件結構：

<form [formGroup]="User">
  <app-radioButton [formControlName]="name"></app-radiobuton>
</form>

並在子組件中注入控制。 您可以在此處查看如何操作

Answer 3

背后的主要原因是您使用的是表單標簽之外的表單控制字段