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>

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

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

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

Answer 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

Angular 6 嵌套响应式表单组件

Angular 6 nested reactive form component

angular

angular-reactive-forms