Angular 6嵌套反应表单组件答案

【问题标题】：Angular 6 nested reactive form componentAngular 6嵌套反应表单组件
【发布时间】：2018-07-15 15:25:53
【问题描述】：

我有一个反应形式的组件：

@Component({
  selector: 'app-new-user',
  templateUrl: './new-user.component.html',
  styleUrls: ['./new-user.component.css']
})
export class NewUserComponent implements OnInit {

  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      username: [null, [Validators.required]],
      password: [null, [Validators.required]],
      isActive: [null, [Validators.required]]
    });
  }

使用这样的模板：

<form (ngSubmit)="onSubmit()" [formGroup]="registerForm" class="newUserForm">
      <app-form-input 
          type="text"
          formCtrlName="username">           
      </app-form-input>
      <app-form-input  
          type="password"
          formCtrlName="password">       
  </app-form-input>
  <app-form-input 
          type="checkbox"
          formCtrlName="isActive">
  </app-form-input>
</form>

如您所见，输入被包装在组件 app-form-input 中，如下所示：

@Component({
  selector: 'app-form-input',
  templateUrl: './form-input.component.html',
  styleUrls: ['./form-input.component.css']
})
export class FormInputComponent implements OnInit {

  @Input() type: string;
  @Input() formCtrlName: string;

  inputFormGroup: FormGroup;

  constructor(private controlContainer: ControlContainer) {}

  ngOnInit() {
    this.inputFormGroup = <FormGroup>this.controlContainer.control;
  }
}

使用模板：

  <div class="form-group" [formGroup]="inputFormGroup">
          <input type={{type}}
                 formControlName={{formCtrlName}}>
    </div>

现在，当我使用基于文本的输入（type="text" 或 type="password" 效果很好）时，这个嵌套组件 app-form-input 就像魅力一样。当我尝试将 app-form-input 与一种复选框一起使用时，就会出现问题。它正确呈现，但复选框似乎超出了我的形式。它是可点击的，但从未将真/假值分配给我的表单。

我尝试直接在NewUserComponent 表单中使用复选框类型的输入，它的工作方式与预期的一样。

谁能帮我找出我犯了什么错误？

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

检测输入type="checkbox"时出现问题。做以下技巧会对你有所帮助。

更改FormInputComponent HTML 如下：

<div [formGroup]="inputFormGroup" >
   <input *ngIf="type!=='checkbox'" type={{type}}
          formControlName={{formCtrlName}} >

   <input *ngIf="type==='checkbox'" type="checkbox"
          formControlName={{formCtrlName}} >
</div>

WORKING DEMO

【讨论】：