子表单组件未拉取父组件的默认表单数据

Question

我有一个很大的响应式表单，我想将模板分解为子组件。

子组件未从父组件中提取默认表单数据。

最初我忘记将子组件的 formGroup 属性绑定到父组件的 FormGroup。我解决了这个问题，但问题仍然存在。

我相信这可能与处理嵌套的 FormGroups 有关。我改变了：

  <app-account-settings [formGroup]="settingsForm" [isBusiness]="isBusiness" 
   [user]="user"></app-account- 
   settings>

至：

  <app-account-settings [formGroup]="accountSettings" [isBusiness]="isBusiness" 
   [user]="user"></app-account- 
   settings>

这没有用。

父组件：

export class SettingsPage implements OnInit {
  public user: any;
  public isBusiness: boolean;
  public settingsForm:  FormGroup


  constructor(
    private config: Configuration,
    private profileProvider: ProfileProvider,
    private authentication: AuthenticationProvider,
    private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.isBusiness = this.authentication.isBusiness()
    this.user = this.route.snapshot.data.userProfile;

    this.settingsForm = new FormGroup({
      accountSettings: new FormGroup({
        username: new FormControl(this.user.username),
        email: new FormControl(this.user.email),
        password: new FormControl(this.user.password)
        })
           ...more form groups
      })

  })

父模板：

<form [formGroup]="settingsForm" (ngSubmit)="onSubmit()">
   <app-account-settings [formGroup]="settingsForm" [isBusiness]="isBusiness" 
   [user]="user"></app-account- 
   settings>

子组件：

@Component({
  selector: 'app-account-settings',
  templateUrl: './account-settings.component.html',
  styleUrls: ['./account-settings.component.scss']
})
export class AccountSettingsComponent implements OnInit {
  @Input('isBusiness') isBusiness: boolean;
  @Input('user') user: any;
  @Input('id') id: any

  constructor(private controlContainer: ControlContainer) { }

  ngOnInit() {
   console.log('isBusiness', this.isBusiness) // successfully logs value
    console.log('user', this.user) // successfully logs value

  }

}

子模板：

<ng-container formGroup="controlContainer.control">
<div class="row settings-block">
  <div class="col-md-12" >
    <div class="box title">
      <div class="row" >
        <div class="col-md-12" >
          <h1>Account</h1>
        </div>
      </div>
    </div>
    <div class="box settings">
      <div class="row">
        <div class="col-md-4">
          <h1>Username</h1>
          <input type="text" placeholder="Username" formControlName="username" [value]="user.username">
        </div>
        <div class="col-md-4">
          <h1>Email Address</h1>
          <input type="email" placeholder="Email Address" formControlName="email" [value]="user.email || ''">
        </div>
        <div class="col-md-4">
          <h1>New Password</h1>
          <input type="password" placeholder="Enter New Password" formControlName="password" value="">
        </div>
    </div>
  </div>
</div>
</ng-container>

我希望将默认的 FormControl 值传递给子组件的输入元素。这不会发生。

Answer 1

尝试将 <ng-container formGroup="controlContainer.control"> 更改为 <ng-container [formGroup]="controlContainer.control">。当您指定带有方括号的属性时（属性绑定），Angular 会将右侧解释为 JS 对象，但是当您不使用它们时，angular 不会评估它并且认为它只是一个字符串。

Answer 2

在不实施 ControlValueAccessor 的情况下解决此问题的最简单方法是在您的子模板上使用 viewProviders。

从您的 <app-account-settings>

中删除 [formGroup]="settingsForm"

<form [formGroup]="settingsForm" (ngSubmit)="onSubmit()">
   <app-account-settings [isBusiness]="isBusiness" 
   [user]="user"></app-account-settings>

然后你的子组件添加 viewProviders 属性到组件：（也不需要在你的构造函数中注入 ControlContainer，所以你可以删除它。）

@Component({
  selector: 'app-account-settings',
  templateUrl: './account-settings.component.html',
  styleUrls: ['./account-settings.component.scss'],
  viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective }]
})

然后你就可以在你的子组件上使用你的 formGroup="accountSettings"

这里有一个关于 stackblitz 的例子供参考：https://stackblitz.com/edit/angular-ruxfee

子表单组件未拉取父组件的默认表单数据

Child form component is not pulling through default form data of parent component

angular

angular-reactive-forms