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

无需实施ControlValueAccessor即可解决此问题的最简单方法是在子模板上使用viewProviders。

从您的[formGroup]="settingsForm"中删除<app-account-settings>

<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"

以下是关于闪电战的示例，以供参考：https://stackblitz.com/edit/angular-ruxfee

Answer 2

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

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

2 个答案: