formGroup 期望一个 FormGroup 实例，动态表单

huangapple
go评论101阅读模式
英文:

formGroup expects a FormGroup instance, dynamic form

问题

I have translated the code portions for you:

  1. <!-- language: lang-html -->
  2. <h2 mat-dialog-title>Title</h2>
  3. <mat-dialog-content [formGroup]="formGroup">
  4.     <ng-container class="form-row" *ngFor="let item of intData">
  5.         <app-input-field [formGroup]="formGroup"
  6.                         [data]="item.data" 
  7.                         [controlName]="item.controlName" 
  8.                         [placeHolder]="item.placeHolder" 
  9.                         *ngIf="item.input==='inputField'">
  10.         </app-input-field>
  11.     </ng-container>
  12. </mat-dialog-content>
  13. <mat-dialog-actions>
  14.     <button class="mat-raised-button mat-primary" [mat-dialog-close]="data" (click)="save()">Publish</button>
  15. </mat-dialog-actions>
  1. <!-- language: lang-ts -->
  2. @Component({
  3.   selector: 'app-modal-admin-cops',
  4.   templateUrl: './modal-admin-cops.component.html',
  5.   styleUrls: ['./modal-admin-cops.component.css']
  6. })
  7. export class ModalAdminCopsComponent implements AfterViewInit {
  8.   private controllerNames: string[] = [];
  9.   private intData;
  10.   private formGroup: FormGroup;
  11.   
  12.   constructor(
  13.     private renderer: Renderer2,
  14.     private http: HttpClient,
  15.     private formBuilder: FormBuilder,
  16.     private dialogRef: MatDialogRef<ModalAdminCopsComponent>,
  17.     @Inject(MAT_DIALOG_DATA) public data: any[]
  18.   ) {
  19.     this.intData = data;
  20.     this.cargar();
  21.   }
  23.   cargar() {
  24.     this.intData.forEach(x => {
  25.       console.log(x.data);
  26.       if (x.input === "inputField") {
  27.         this.controllerNames.push(x.controlName);
  28.       }
  29.     });
  30.     
  31.     console.log(this.controllerNames);
  32.   }
  34.   ngAfterViewInit() {
  35.     console.log("llega");
  36.     this.formGroup = this.toFormGroup();
  37.     console.log(this.formGroup);
  38.   }
  40.   toFormGroup(): FormGroup {
  41.     let group: any = {};
  42.     this.controllerNames.forEach(x => {
  43.       group[x] = new FormControl();
  44.     });
  45.     return new FormGroup(group);
  46.   }
  48.   save() {
  49.     location.reload();
  50.   }
  51. }
  1. <!-- language: lang-ts -->
  2. @NgModule({
  3.   declarations: [
  4.     // ...
  5.   ],
  6.   imports: [
  7.     // ...
  8.   ],
  9.   entryComponents: [
  10.     ModalAdminCopsComponent // Add your dialog component here
  11.   ]
  12. })
  13. export class YourModule { }

Please note that you should replace "YourModule" with the actual name of your module where you declare your dialog component.

英文:

I'm making a dynamic form using this guide but I'm a little bit confused, the form is in a dialog made with angular materials.

modal-admin-cops.component.html

<!-- language: lang-html -->

  1. &lt;h2 mat-dialog-title&gt;Title&lt;/h2&gt;
  2. &lt;mat-dialog-content [formGroup]=&quot;formGroup&quot;&gt;
  3.         &lt;ng-container class=&quot;form-row&quot; *ngFor=&quot;let item of intData&quot;&gt;
  4.             &lt;app-input-field [formGroup]=&quot;formGroup&quot;
  5.                             [data]=&quot;item.data&quot; 
  6.                             [controlName]=&quot;item.controlName&quot; 
  7.                             [placeHolder]=&quot;item.placeHolder&quot; 
  8.                             *ngIf=&quot;item.input===&#39;inputField&#39;&quot;&gt;
  9.             &lt;/app-input-field&gt;
  10.             &lt;!--
  11.             &lt;app-file-field [form]=&quot;form&quot;
  12.                         [data]=&quot;item&quot; 
  13.                         [controlName]=&quot;item.controlName&quot; 
  14.                         [placeHolder]=&quot;item.placeHolder&quot; 
  15.                         *ngIf=&quot;item.input===&#39;fileField&#39;&quot;&gt;
  17.             &lt;/app-file-field&gt;
  18.             &lt;app-select-field [form]=&quot;form&quot;
  19.                             [data]=&quot;item&quot; 
  20.                             [controlName]=&quot;item.controlName&quot; 
  21.                             [placeHolder]=&quot;item.placeHolder&quot; 
  22.                             *ngIf=&quot;item.input===&#39;selectField&#39;&quot;&gt;
  23.             &lt;/app-select-field&gt;
  24.             --&gt;
  25.         &lt;/ng-container&gt;
  26. &lt;/mat-dialog-content&gt;
  27. &lt;mat-dialog-actions&gt;
  28.     &lt;button class=&quot;mat-raised-button mat-primary&quot; [mat-dialog-close]=&quot;data&quot; (click)=&quot;save()&quot;&gt;Publish&lt;/button&gt;
  29. &lt;/mat-dialog-actions&gt;

modal-admin-cops.component.ts

<!-- language: lang-ts -->

  1. @Component({
  2.   selector: &#39;app-modal-admin-cops&#39;,
  3.   templateUrl: &#39;./modal-admin-cops.component.html&#39;,
  4.   styleUrls: [&#39;./modal-admin-cops.component.css&#39;]
  5. })
  6. export class ModalAdminCopsComponent implements AfterViewInit {
  7.   private controllerNames:string[]=[];
  8.   private intData;
  9.   private formGroup:FormGroup;
  10.   
  11.   constructor(
  12.     private renderer:Renderer2,
  13.     private http:HttpClient,
  14.     private formBuilder: FormBuilder,
  15.     private dialogRef:MatDialogRef&lt;ModalAdminCopsComponent&gt;,
  16.     @Inject(MAT_DIALOG_DATA) public data:any[]) 
  17.     {
  18.       this.intData=data;
  19.       this.cargar();
  20.     }
  21.   cargar(){
  22.     this.intData.forEach(x=&gt;{
  23.       console.log(x.data);
  24.       if(x.input===&quot;inputField&quot;){
  25.         this.controllerNames.push(x.controlName);
  26.       }
  27.     });
  28.     
  29.     console.log(this.controllerNames);
  30.   }
  31.   ngAfterViewInit(){
  32.     console.log(&quot;llega&quot;);
  33.     this.formGroup=this.toFormGroup();
  34.     console.log(this.formGroup);
  35.   }
  36.   toFormGroup():FormGroup{
  37.     let group:any;
  38.     this.controllerNames.forEach(x=&gt;{
  39.       group[x]=new FormControl();
  40.     });
  41.     return new FormGroup(group);
  42.   }
  43.   save(){
  44.     location.reload();
  45.   }
  46. }

The @Inject(MAT_DIALOG_DATA) public data:any[]) receives something like this:

<!-- language: lang-ts -->

  1. [{
  2.    input:&quot;inputField&quot;,
  3.    controlName:&quot;nombre&quot;,
  4.    placeHolder:&quot;Escribe el nombre de la cop&quot;,
  5.    data:{
  6.      cod:here goes a number,
  7.      desc:Here goes a string
  8.   }
  9. }]

Sometimes data maybe an array of {cod,desc}

input-field.component.html

<!-- language: lang-html -->

  1. &lt;div [formGroup]=&quot;formGroup&quot;&gt;
  2.         &lt;mat-form-field #input class=&quot;expand&quot; [class]=&quot;placeHolder&quot;&gt;
  3.                 &lt;input matInput
  4.                         [(value)]=&quot;data.desc&quot;
  5.                         [placeholder]=&#39;placeHolder&#39; 
  6.                         [formControlName]=&#39;controlName&#39;&gt;
  7.         &lt;/mat-form-field&gt;
  8. &lt;/div&gt;

input-field.component.ts

<!-- language: lang-ts -->

  1. @Component({
  2.   selector: &#39;app-input-field&#39;,
  3.   templateUrl: &#39;./input-field.component.html&#39;,
  4.   styleUrls: [&#39;./input-field.component.css&#39;]
  5. })
  6. export class InputFieldComponent implements AfterViewInit {
  7.   @Input() formGroup:FormGroup;
  8.   @Input() data:any;
  9.   @Input() controlName:string;
  10.   @Input() placeHolder:string;
  11.   
  12.   constructor() {
  13.     
  14.   }
  15.   
  16. }

When I click a button that start the dialog I get this:

  1. ModalAdminCopsComponent.html:2 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
  2. InputFieldComponent.html:1 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

What I am trying to do is to create the form dynamically with different types of inputs.

Edit1:
If i used:

<!-- language: lang-ts -->

  1. ngOnInit(){
  2.   this.formGroup=this.toFormGroup();
  3.   console.log(this.formGroup);
  4. }

I get:

  1. formGroup expects a FormGroup instance. Please pass one in.

If I used:

<!-- language: lang-ts -->

  1. ngAfterViewInit(){
  2.   this.formGroup=this.toFormGroup();
  3.   console.log(this.formGroup);
  4. }

i get:

  1. Cannot read property &#39;get&#39; of undefined
  2. Cannot set property &#39;nombre&#39; of undefined

答案1

得分: 0

在构造函数或ngInit中初始化您的formGroup。

  1. this.formGroup = this.formBuilder.group({
  2.   name: new FormControl('')
  3. });
英文:

Initialize your formGroup in the constructor or in ngInit

  1. this.formGroup = this.formBuilder.group({
  2.   name: new FormControl(&#39;&#39;)
  3. });

答案2

得分: 0

我把这段代码放在input.component.ts文件中：

  1. ngOnInit(){
  2.   this.formGroup.controls[this.controlName]=new FormControl();
  3. }

似乎是将其添加到了formGroup中。

英文:

Finally a get a way to add the controllers:
I put this in the input.component.ts

<!-- language: lang-ts -->

  1. ngOnInit(){
  2.   this.formGroup.controls[this.controlName]=new FormControl();
  3. }

That seems to add to the formGroup.

huangapple
  • 本文由 发表于 2020年1月3日 18:00:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/59576496.html
  • angular
  • angular-material
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定