Как сделать угловой компонент многоразовым?(Угловой 2+)

Question

Я сделал поле ввода для IP-адреса с портом.Это поле ввода состоит из 5 полей ввода внутри деления.Это базовый пример.

<div class="form-inline" style="display: inline-block">
  <input required name="block1" class="form-control" #block1="ngModel" type="text" [(ngModel)]="ipBlock1">.
  <input required name="block2" class="form-control" #block2="ngModel" type="text" [(ngModel)]="ipBlock2">.
  <input required name="block3" class="form-control" #block3="ngModel" type="text" [(ngModel)]="ipBlock3">.
  <input required name="block4" class="form-control" #block4="ngModel" type="text" [(ngModel)]="ipBlock4">:
  <input required name="block5" class="form-control" #block5="ngModel" type="text" [(ngModel)]="ipBlock5">
</div>

В файле ip-address-input.component.ts у меня есть:

@Input() ipProtocol
@Output() ipAddressCreated: EventEmitter<any> = new EventEmitter<{ipAddress: string}>();
ipBlock1: string;
ipBlock2: string;
//some logic like string concatenation (ipBlock1 + '.' + ipBlock2 + '.' + ...)

В app.component.html:

<ip-address-input [ipProtocol]="dhcpRangeStart"></ip-address-input>
<ip-address-input [ipProtocol]="dhcpRangeStop"></ip-address-input>

Но когда я проверяю, например, первый IP-адрес, он возвращает последний введенный IP-адрес.Как я могу сделать этот компонент многоразовым (сделать его несколько экземпляров)

Изображение с фактическим полем ввода IP:

Answer 1

Я построил несколько элементов управления, похожих на ваш, используя ControlValueAccessor и NG_VALUE_ACCESSOR из угловых форм.По сути, они предоставляют вам шаблон для создания ваших собственных и многократно используемых элементов управления формой.

Ниже приведен пример кода, но вы также можете следовать этому руководству , чтобы получить свой компонент.

Компонент:

import { Component, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms';

const IP_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => IpInputComponent),
    multi: true
};

@Component({
  selector: 'ip-address-input',
  providers: [IP_VALUE_ACCESSOR],
  templateUrl: './ip-input.component.html',
  styleUrls: ['./ip-input.component.css']
})
export class IpInputComponent implements OnInit, ControlValueAccessor {

ipBlock1: string;
ipBlock2: string;
ipBlock3: string;
ipBlock4: string;
ipBlock5: string;

    disabled: boolean;
    onChange: Function; 
    onTouched: Function; 

    get value(): string {
        return ipBlock1 + '.' + ipBlock2 + '.' + ipBlock3 + '.' + ipBlock4 + ':' + ipBlock5;
    }

    constructor() {
        this.onChange = (_: any) => {};
        this.onTouched = () => {};
        this.disabled = false;
    }

    ngOnInit() {
    }

    writeValue(obj: any): void {
        if(obj) {
            let arr = obj.split('.');

            this.ipBlock1 = arr[0];
            this.ipBlock2 = arr[1];
            this.ipBlock3 = arr[2];
            this.ipBlock4 = arr[3].split(':')[0];
            this.ipBlock5 = arr[3].split(':')[1];
        }
    }

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }
    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }
    setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }
}

Шаблон:

<div class="form-inline" style="display: inline-block">
  <input required class="form-control" type="number" [ngModel]="ipBlock1" />. 
  <input required class="form-control" type="number" [ngModel]="ipBlock2" />.
  <input required class="form-control" type="number" [ngModel]="ipBlock3" />.
  <input required class="form-control" type="number" [ngModel]="ipBlock4" />:
  <input required class="form-control" type="number" [ngModel]="ipBlock5" />
</div>

Использование:

<ip-address-input formControlName="ipAddress" (value)="ipAddress.value"></ip-address-input>

HTH

Answer 2

вы перезаписываете свои данные в компоненте, так что вы можете получить только последнюю запись.если вы хотите получить больше записей, создайте один компонент с формой в нем, и эта форма имеет массив форм, который содержит группу форм из 5 элементов управления формой.

теперь вы можете добавить эти формыгруппируйте столько раз, сколько вам нравится, в массив форм, и когда пользователь отправляет форму, данные будут сохранены в значении формы в виде массива и могут быть легко извлечены.