я использовал тот же сценарий моего приложения. Я хочу создать динамический компонент адреса. для многих форм. поэтому сначала я создаю общий компонент
import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core';
import { AddressModal } from '../../modals/opportunity.modal';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.css'],
})
export class AddressComponent implements OnInit, AfterViewInit {
form_address: FormGroup;
@Input('addressModal') addressModal: AddressModal;
@Output()
private formReady: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
listCountry = [];
public formSubmitAttempt: boolean = false;
constructor(private fb: FormBuilder) {
this.getCountryList();
this.createForm();
}
ngOnInit(): void {
this.formReady.emit(this.form_address);
if (this.addressModal && this.addressModal !== undefined) {
setTimeout(function () {
this.form_address.setValue(this.addressModal);
}.bind(this), 500);
}
}
ngAfterViewInit(): void {
}
createForm() {
const requiredValidations = [
Validators.required,
this.conf.noWhitespaceValidator,
];
this.form_address = this.fb.group({
id: [''],
row_id: [''],
opportunity_id: [''],
address1: ['', requiredValidations],
address2: [''],
city: ['', requiredValidations],
state: ['', requiredValidations],
zipcode: ['', requiredValidations],
country: ['S1ptmVWUWsjyGvlr', requiredValidations],
added_date: [''],
modified_date: [''],
status: ['']
});
}
getCountryList() {
let _self = this;
this.conf.getApiCall('get_countries', {}, function (res) {
if (res.data !== undefined && res.data.countries != undefined) {
_self.listCountry = res.data.countries;
}
}, function (err) {
console.log(err);
});
}
}
, затем реализую его в нашем файле component.html
<app-address (formReady)="addFormControl($event)" [addressModal]="address"></app-address>
после события пожара в файле component.ts
private addFormControl(name: string, formGroup: FormGroup): void {
if (!this.form1.controls[name] && !this.form1.controls[name] !== undefined) {
this.form1.addControl(name, formGroup);
}
}
private addBlankAddress(): void {
let address_obj: AddressModal = {
id: '',
row_id: this.conf.randomRowId(),
opportunity_id: '',
address1: '',
address2: '',
city: '',
state: '',
zipcode: '',
country: 'S1ptmVWUWsjyGvlr',
added_date: '',
modified_date: '',
status: ''
};
this.list_address.push(address_obj);
//return address_obj;
}