Question

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

 <!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">

        @include('inc/navbar')
        <div class="container">
          @include('inc/messages')
          @yield('content')
        </div>
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    <script type="text/javascript" src="{{URL::asset('js/custom.js') }}"></script>
    <script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
    <script>
      CKEDITOR.replace('article-ckeditor');
    </script>
</body>
</html>

具有这样的模板：

@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]]
    });
  }

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

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

带有模板：

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

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

我尝试直接以<div class="form-group" [formGroup]="inputFormGroup"> <input type={{type}} formControlName={{formCtrlName}}> </div>形式使用类型为checkbox的输入，它的工作原理与预期的一样。

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

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嵌套反应形式组件

1 个答案: