相关疑难解决方法(0)

表单内的多个子组件 - Angular 2

我正在处理大型表单,因此我计划将表单截断为多个子组件,这有助于轻松集成和维护.使用表单生成器我试图实现这一点.

mainform.html

    <form novalidate (ngSubmit)="onSubmit(formDetail);" [formGroup]="formDetail">
      <label>
        <span>Name</span>
          <input
          type="text"
          placeholder="Enter emp name"
          formControlName="name">
      </label>
      <app-userinfo></app-userinfo> <!-- Child component 1 -->
      <app-useracc></app-useracc> <!-- Child component 2 -->
    </form>
Run Code Online (Sandbox Code Playgroud)

mainform.ts

export class MainformComponent implements OnInit {
  formDetail: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
      this.formDetail= this.formBuilder.group({
        name:'',
      userinfo: this.formBuilder.group({
        userid: '',
        userph: ''
      }),
      useracc: this.formBuilder.group({
        useracc: '',
        usertransfer: ''
      })
    });
  }
  onSubmit(value:User){
    debugger;
  }
}
Run Code Online (Sandbox Code Playgroud)

CONSOLE.LOG

formControlName must be used with a parent formGroup directive.  You'll want to …
Run Code Online (Sandbox Code Playgroud)

angular2-forms angular2-directives angular

2
推荐指数
1
解决办法
6942
查看次数