当 FormGroup 传递给子组件时,FormControlName 必须与父 FormGroup 指令一起使用

Vee*_*era 7 angular-material angular angular8 angular9 angular12

父组件

  <form [formGroup]="User">
    
    <app-radioButton [group]="user"></app-radiobuton>
    
    </form>
Run Code Online (Sandbox Code Playgroud)

在无线电组件 html 中

<mat-radio-button  [formControlName]="name" > <mat-radio-button>
Run Code Online (Sandbox Code Playgroud)

无线电组件的 .ts 中

export class RadioComponent{
@Input() group: FormGroup;
}
Run Code Online (Sandbox Code Playgroud)

报错如上。不知道我做错了什么。

Boz*_*ski 16

其失败的原因是 Angular 正在等待任何父子元素上的 FormGroupDirective。所以:

在子组件中请声明:

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

或者

您可以在子组件中使用 formControl:

<mat-radio-button [formControl]="name"><mat-radio-button>
Run Code Online (Sandbox Code Playgroud)

  • 在这里,安东 https://stackblitz.com/edit/angular-tfctab?file=app/ang-form.component.ts (5认同)