Angular 创建一个可重用的FormGroup

我知道将自定义控件创建为组件，但我不知道如何创建自定义组

同样，我们可以通过使用像

这样的自定义组件来实现这一点，我们如何才能为实现这一效果

父模板（为简洁起见，不可访问且非语义）：

---

角形窗体没有组名和窗体控件名的概念。但是，通过将子模板包装到表单组中，可以非常轻松地解决此问题

下面是一个与您发布的标记类似的示例-

@组件({
选择器：“地址表单组”，
模板：`
`
})
导出类AddressFormGroupComponent{
@Input（）public groupName:string；
构造函数（@SkipSelf（）公共组：ControlContainer）{}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{form？.value | json}}
`
})
导出类AppComponent{
公共形式：FormGroup；
构造函数（私有fb:FormBuilder）{
this.form=this.fb.group({
用户名：“”，
全名：“”，
密码：“”，
地址：this.fb.group({
国家：“，
声明：''，
城市：''，
街道：''，
建筑物：''，
})
});
}
}

中提到了我丢失的那块，那就是注射

结果表明，如果将

formGroupName

放置在组件上，并且如果该组件注入

ControlContainer

，则会获得对包含该表单的容器的引用。从这里开始很容易

我们创建一个子表单组件

@Component({
  selector: 'sub-form',
  template: `
    <ng-container [formGroup]="controlContainer.control">
      <input type=text formControlName=foo>
      <input type=text formControlName=bar>
    </ng-container>
  `,
})
export class SubFormComponent {
  constructor(public controlContainer: ControlContainer) {
  }
}

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]=form>
      <sub-form formGroupName=group></sub-form>
      <input type=text formControlName=baz>
    </form>
  `,
})
export class AppComponent  {
  form = this.fb.group({
    group: this.fb.group({
      foo: 'foo',
      bar: 'bar',
    }),
    baz: 'baz',
  })

  constructor(private fb: FormBuilder) {}
}

你可以看到一个

---

这比rusev的答案在几个方面有所改进：

• 无自定义

  groupName

  输入；相反，我们使用Angular提供的

  formGroupName

• 不需要

  @SkipSelf

  decorator，因为我们不是注入父控件，而是注入我们需要的父控件
• 没有笨拙的

  group.control.get（groupName）

  ，它将转到父级以获取自身

---

这真的很有帮助！谢谢@lazar ljubenović这很有帮助，效果也很好。回答很好，谢谢，我如何实现验证？我正在尝试在子组件上实现验证，但我不知道，我该怎么做？谢谢，非常有帮助。这在房间里吗？我已经找过了，但是没有找到任何东西。你刚刚分离了模板。控件呢。我需要一些你想要有条件地呈现的东西，如果那些属性foo，bar是必需的，那么你不能提交表单。

<!-- parent template -->
<form [groupName]="form">
  <input formControlName="username">
  <input formControlName="fullName">
  <input formControlName="password">
  <address-form-group formGroup="address"></address-form-group>
</form>

<!-- child template -->
<input formControlName="country">
<input formControlName="state">
<input formControlName="city">
<input formControlName="street">
<input formControlName="building">

 @Component({
  selector: 'address-form-group',
  template: `
    <!-- child template -->
    <ng-container [formGroup]="group.control.get(groupName)">
      <input formControlName="country">
      <input formControlName="state">
      <input formControlName="city">
      <input formControlName="street">
      <input formControlName="building">
    </ng-container>
  `
})
export class AddressFormGroupComponent  { 
  @Input() public groupName: string;

  constructor(@SkipSelf() public group: ControlContainer) { }
}

@Component({
  selector: 'my-app',
  template: `
    <!-- parent template -->
    <div [formGroup]="form">
      <input formControlName="username">
      <input formControlName="fullName">
      <input formControlName="password">
      <address-form-group groupName="address"></address-form-group>
    </div>
    {{form?.value | json}}
  `
})
export class AppComponent { 
  public form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      username: '',
      fullName: '',
      password: '',
      address: this.fb.group({
        country: '',
        state: '',
        city: '',
        street: '',
        building: '',
      })
    });
  }
}

@Component({
  selector: 'sub-form',
  template: `
    <ng-container [formGroup]="controlContainer.control">
      <input type=text formControlName=foo>
      <input type=text formControlName=bar>
    </ng-container>
  `,
})
export class SubFormComponent {
  constructor(public controlContainer: ControlContainer) {
  }
}

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]=form>
      <sub-form formGroupName=group></sub-form>
      <input type=text formControlName=baz>
    </form>
  `,
})
export class AppComponent  {
  form = this.fb.group({
    group: this.fb.group({
      foo: 'foo',
      bar: 'bar',
    }),
    baz: 'baz',
  })

  constructor(private fb: FormBuilder) {}
}