创建一个自定义组件，将输入控件包装在Angular上以用于反应形式 [英] Creating a custom component wrapping an input control on Angular for reactive forms

问题描述

我试图创建一个内部带有输入表单控件的自定义组件，但是我不知道如何将指令formControl和formControlName连接到内部输入，这是我的代码:

I'm trying to create a custom component with an input form control inside but I have no idea how to connect the directive formControl and formControlName to the inner input, this is my code:

<div class="input-group">
    <input class="form-control form-control-sm"
        #code />
    <div class="input-group-append">
        <button type="button" class="btn btn-sm btn-success"
            (click)="search()">
            <i class="fa fa-search"></i>
        </button>
    </div>
</div>

这是.ts文件

import { Input, Component, forwardRef, OnInit, ViewChild } from '@angular/core';
import { DefaultValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'search-input',
    templateUrl: './search-input.component.html',
    styleUrls: ['./search-input.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SearchInputComponent),
            multi: true
        }
    ]
})
export class SearchInputComponent implements OnInit, ControlValueAccessor {
    writeValue(obj: any) {
    }

    registerOnChange(fn: any) {
    //this.valueAccesor.registerOnChange(fn);
    }

   registerOnTouched(fn: any) {
    //this.valueAccesor.registerOnTouched(fn);
   }

    setDisabledState(isDisabled: boolean) {
    //this.valueAccesor.setDisabledState(isDisabled);
    }
}

应该

<search-input formControlName="code">

或

<search-input formControl="code">

请帮帮我，我对Angular没有太多经验

Please, help me with this, I don't have much experience with Angular

推荐答案

为了使子组件与相同的父表单一起工作，您应该将父表单"实例作为子组件的输入传递.父表单将使用表单构建器来创建子表单控件.子级将为控件定义模板.

In order to have a child component work with the same parent form, you should pass in the Parent Form instance as an input to the child component. The parent form will use the form builder to create the child form control. The child will define the template for the control.

这是带有子组件(AppTestInputForm)的父表单(沙盒):

Here is a parent form (Sandbox) with a child component (AppTestInputForm):

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Form, FormGroup, FormControl, Validators } from '@angular/forms';

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

  constructor(private formBuilder: FormBuilder) { 
    this.form = formBuilder.group({
      searchValue: new FormControl('')
    });
  }
  ngOnInit() {

  }

  submit() {
    if(this.form.valid) {
      console.log(this.form.get('searchValue').value, 'submitting search value');
    }
  }

}

<form [formGroup]="form" (ngSubmit)="submit()">
    <app-test-input-form [parentForm]="form"></app-test-input-form>
    <button type="submit" class="btn btn-primary">Submit</button>
 </form>

以下是包含搜索输入的子组件:

Here is the child component which contains the search input:

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-test-input-form',
  templateUrl: './test-input-form.component.html',
  styleUrls: ['./test-input-form.component.css']
})
export class TestInputFormComponent implements OnInit {
  @Input() parentForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { 

  }

  ngOnInit() {

  }

  search() {
    console.log('searching with value', this.parentForm.get('searchValue').value);
  }
}

<div class="input-group" [formGroup]="parentForm">
  <input class="form-control form-control-sm" formControlName="searchValue" />
  <div class="input-group-append">
    <button type="button" class="btn btn-sm btn-success" (click)="search()">
            <i class="fa fa-search"></i>
        </button>
  </div>
</div>

这篇关于创建一个自定义组件，将输入控件包装在Angular上以用于反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！