Angular 6嵌套反应形式组件

Question

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

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

现在，当我使用基于文本的输入时，此嵌套的组件app-form-input就像魅力（type =“ text”或type =“ password”很好用）。当我尝试使用带有复选框类型的app-form-input时出现问题。它可以正确呈现，但复选框似乎超出了我的表单。它是可单击的，但从未将true / false值分配给我的表单。

我试图直接在NewUserComponent表单中使用类型为checkbox的输入，它的工作原理与预期的一样。

有人可以帮助我发现我犯了什么错误吗？

Answer 1

检测输入时出现问题type="checkbox"。执行以下技巧将对您有所帮助。

更改FormInputComponentHTML 如下所示：

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

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

WORKING DEMO