如何在Angular 6中使用两个组件构建表单，其中一个是模态的？

Question

我想在使用另一个弹出式组件的组件中实现反应式表单

对话框组件（子组件）

.ts

@Component({
  selector: 'app-mat-description-indicateur-dialog',
  templateUrl: './mat-description-indicateur-dialog.component.html',
  styleUrls: ['./mat-description-indicateur-dialog.component.scss'],
  viewProviders: [
    {
      provide: ControlContainer, 
      useExisting: FormGroupDirective
    }
  ]
})
export class MatDescriptionIndicateurDialogComponent implements OnInit {

 @Input() indicateurLocauxAddForm: FormGroup;

  constructor(@Optional() @Inject(MAT_DIALOG_DATA) public data : any ,
  @Optional() public dialogRef: MatDialogRef<MatDescriptionIndicateurDialogComponent>,
  private parent: FormGroupDirective) { }

  ngOnInit() {
    this.indicateurLocauxAddForm = this.parent.form ;

    this.indicateurLocauxAddForm.addControl('description' ,new FormControl ('', Validators.required)); 
  }    
}

.html

<mat-grid-list style="margin-top : 15px" cols="6" rowHeight="70px">

  <mat-grid-tile colspan="6" rowspan="1">
    <mat-form-field class="example-full-width">
      <textarea matInput placeholder="Description de l'indicateur local" style="height: 35px; width: 550px"
        formControlName="description"></textarea>
    </mat-form-field>
  </mat-grid-tile>

</mat-grid-list>

父组件

.ts

openDialog()  {
      const dialogRef = this.dialog.open(MatDescriptionIndicateurDialogComponent, {
        width: '600px',
        data: 'any' 
      });  
      dialogRef.afterClosed().subscribe(result => {
        console.log('The dialog was closed');
        this.poPup = result;
        console.log("this description " + this.poPup);
        console.log("data is " + dialogRef);      

      });}    

.html

<form [formGroup]="indicateurLocauxAddForm">
      <app-mat-description-indicateur-dialog [indicateurLocauxAddForm]="indicateurLocauxAddForm" ></app-mat-description-indicateur-dialog >

</form>

当我打开模式时，会显示此错误：

错误类型错误：无法在 MatDescriptionIndicateurDialogComponent.push../src/app/campagne/axe/axe-locaux/indicateur-locaux-add/mat-description-indicateur-dialog/mat-description 读取属性“addControl” -indicateur-dialog.component.ts.MatDescriptionIndicateurDialogComponent.ngOnInit (main.js:1294)

错误类型错误：无法在 FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl 处读取 null 的属性“get”

Answer 1

尝试在打开对话框时将 formGroup 作为数据传递，并将其初始化为 indicateurLocauxAddForm。

const dialogRef = this.dialog.open(MatDescriptionIndicateurDialogComponent, {
    width: '600px',
    data: {
            form: this.indicateurLocauxAddForm 
    }
});

在对话框.ts中

ngOnInit() {
    this.indicateurLocauxAddForm = this.data.form ;
    this.indicateurLocauxAddForm.addControl('description' ,new FormControl ('', Validators.required)); 
}  

Answer 2

我解决了这个问题谢谢大家，

dialog.ts

export interface DialogData {
  description: FormControl;

}


@Component({
  selector: 'app-mat-description-indicateur-dialog',
  templateUrl: './mat-description-indicateur-dialog.component.html',
  styleUrls: ['./mat-description-indicateur-dialog.component.scss'],

})


export class MatDescriptionIndicateurDialogComponent implements OnInit {

 @Input() indicateurLocauxAddForm: FormGroup;

 @Input() indicateur = new Indicateur();

  constructor(  public dialogRef: MatDialogRef<MatDescriptionIndicateurDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data : DialogData ,
    private parent: FormGroupDirective) {
    console.log("la description de l'indicateur est " + this.data)

   }

  ngOnInit() {


    this.data.description = new FormControl('', Validators.required);
    this.indicateurLocauxAddForm = new FormGroup({ description: this.data.description,})



  }

dialog.html

<mat-grid-list style="margin-top : 5px" cols="20" rowHeight="29px">
  <mat-grid-tile colspan="9" rowspan="1">
  </mat-grid-tile>

  <mat-grid-tile colspan="10" rowspan="1">
  </mat-grid-tile>

  <mat-grid-tile colspan="1" rowspan="1" style="margin: -20px 0px 0px 11px !important">

    <mat-icon id="close-icon" (click)="closeDialog()" style="cursor: pointer;">close</mat-icon>

  </mat-grid-tile>
</mat-grid-list>

<mat-grid-list style="margin-top : 15px" cols="4" rowHeight="55px">
  <mat-grid-tile colspan="4" rowspan="1">


  </mat-grid-tile>
</mat-grid-list>

<mat-grid-list style="margin-top : 15px" cols="6" rowHeight="100px">

  <mat-grid-tile colspan="6" rowspan="1">

    <mat-form-field class="example-full-width" >
        <div [formGroup]="indicateurLocauxAddForm">
      <textarea matInput placeholder="Description de l'indicateur local" style="height: 35px; width: 550px"
      formControlName="description" [(ngModel)]="indicateur.description"></textarea>


        </div>
        <mat-error>Champ obligatoire.</mat-error>
    </mat-form-field>

  </mat-grid-tile>

</mat-grid-list>



<mat-grid-list style="margin-top : 15px" cols="16" rowHeight="55px">
  <mat-grid-tile colspan="4" rowspan="1">



  </mat-grid-tile>

  <mat-grid-tile colspan="4" rowspan="1">

    <button mat-raised-button class="no-button" [mat-dialog-close]="false">Annuler</button>
  </mat-grid-tile>

  <mat-grid-tile colspan="4" rowspan="1">

    <button mat-raised-button class="yes-button" [mat-dialog-close]="data" [disabled]="isInValidForm()">Valider</button>
  </mat-grid-tile>

  <mat-grid-tile colspan="2" rowspan="1">


  </mat-grid-tile>

</mat-grid-list>

父.ts

descriptionModal  : string 
    openDialog() {
        this.dialogService.openDialogDescIndicateur().subscribe(data => {

          this.descriptionModal = data.description.value;

          console.log("la description est " + this.descriptionModal);
        });
      }

父.html

<form [formGroup]="indicateurLocauxAddForm">
        <app-mat-description-indicateur-dialog [indicateurLocauxAddForm]="indicateurLocauxAddForm" hidden ></app-mat-description-indicateur-dialog > 
    </form>

对话服务

openDialogDescIndicateur(): Observable<any> {


    const dialogRef = this.dialog.open(MatDescriptionIndicateurDialogComponent, {
      width: '600px',
      disableClose: true,
      data: { description: this.description }

    });

    return dialogRef.afterClosed();

  }