如何使用多個輸入字段創建Angular 2自定義組件

Question

我通過實現CustomValueAccessor接口在Angular 2中創建了一個簡單的自定義組件，它工作正常。 該組件中只有1個輸入字段。 例如郵政編碼部分

 <postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>

現在，我想在此示例上進行擴展，並創建一個具有多個輸入字段（第1行，第2行，第3行，郵政編碼和國家/地區）的地址組件。

我已將郵政編碼示例擴展為包括多個字段，並且可以在屏幕上看到輸入組件。 但是，地址成分值未反映在主機形式中。

欣賞此方向上的任何指針。

范例：

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

@Component({
  selector: 'address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CommonAddressComponent,
      multi: true
    }
  ]
})

export class CommonAddressComponent implements OnInit , ControlValueAccessor {
  addressForm :  FormGroup

  ngOnInit() {
    this.addressForm = this.formBuilder.group({
      line_1: '',
      line_2: '',

    });
  }

  /*private addressForm = new FormControl()*/

  private subscription: Subscription;
  public disabled: any = false;

  constructor(private formBuilder: FormBuilder) { }

  //model to view
  writeValue(value: any) {
    console.log("value = " + value)
    this.addressForm.setValue(value); 
  }

  registerOnChange(fn: (value: any) => void) {
    console.log("registerOnChange = " + fn)

    this.addressForm.valueChanges.subscribe(fn);
  }

  registerOnTouched() {}


}

模板文件：

<div class="form-group" [formGroup]="addressForm">
  <input class="form-control" type="text" formControlName="line_1" />
  <input  class="form-control" type="text" formControlName="line_2" />
</div>

主機表單組件文件：

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


@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {

  contactsForm: FormGroup;

  constructor(private fb: FormBuilder) {
     this.createForm();
   }

   createForm() {
    this.contactsForm = this.fb.group({
      name: 'test', // <--- the FormControl called "name"
      postcode: 'tester111', // <--- the FormControl called "name"
      line_3: '111', // <--- the FormControl called "name"*/
      addressForm: new FormGroup({
              line_1: new FormControl('I am line 1', Validators.minLength(2)),
              line_2: new FormControl('I am line 2')

            }),
    });
  }

  ngOnInit() {
  }

}

主機表單組件模板文件：

<form [formGroup]="contactsForm">

  <p>Form value: {{ contactsForm.value | json }}</p>
  <p>Form status: {{ contactsForm.status | json }}</p>


   <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>

    <div>
      <postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>
    </div>

    <div class="form-group">
    <address-line  cssClass="form-control" name="line3" label="line 3" elementName="line3" 
      elementID="line3" formControlName="line_3"> </address-line>
    </div>

     <!--<div [formGroup]="contactsForm.addressForm"> -->
    <div >
      <address formGroupName="addressForm"> </address>
    </div>

  </form>

Answer 1

經過多次嘗試，我能夠在Angular工作中獲得具有多個輸入字段的自定義控件。 相同的代碼如下：

1. 具有多個輸入字段的自定義組件

    import { Component, OnInit, Input, ViewChild } from '@angular/core'; import { FormControl,NgForm, FormGroup, ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, Validators, NgModel } from '@angular/forms'; import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'address', templateUrl: './address.component.html', styleUrls: ['./address.component.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: AddressComponent, multi: true } ] }) export class AddressComponent implements OnInit , ControlValueAccessor { addressForm : FormGroup @Input() label: string; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.addressForm = this.formBuilder.group({ line1: '', line2: '', line3: '', line4: '', }); } writeValue(value: any) { if (value) { this.addressForm.setValue(value); } } registerOnChange(fn: (value: any) => void) { console.log("registerOnChange = " + fn) this.addressForm.valueChanges.subscribe(fn); } registerOnTouched() {} 

   }

2. 自定義組件模板

模板代碼

 <div class="form-group" [formGroup]="addressForm"> <input type="text" name="line1" class="form-control" type="text" formControlName="line1" /> <input type="text" name="line2" class="form-control" type="text" formControlName="line2" /> <input type="text" name="line3" class="form-control" type="text" formControlName="line3" /> <input type="text" name="line4" class="form-control" type="text" formControlName="line4" /> </div> 

3. 主機或父組件類

   從“ @ angular / core”導入{組件}； 從'@ angular / forms'導入{NgForm，Validators，FormControl，FormGroup}；

    @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { pageForm: FormGroup = new FormGroup({ address: new FormGroup({ line1: new FormControl('',Validators.required), line2: new FormControl('',Validators.required), line3: new FormControl('',Validators.required), line4: new FormControl('') }), }) } 

4。

 <div class="container"> <form [formGroup]="pageForm"> <p>Form value: {{ pageForm.value | json }}</p> <p>Form status: {{ pageForm.status | json }}</p> <address label="Line 1" formControlName="address" > </address> </form> </div> 

Answer 2

請注意，Host或Parent Component類必須將“地址”字段聲明為FormControl，而不是FormGroup：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

 pageForm: FormGroup = new FormGroup({
  address: new FormControl({
     line1: new FormControl('',Validators.required),
     line2: new FormControl('',Validators.required),
     line3: new FormControl('',Validators.required),
     line4: new FormControl('')
   }),
 })

}