Возникла проблема с распространением значения из пользовательского компонента формы.
Если написать что-либо в Jobtitle, это будет отражено непосредственно от текущей к верхней группе форм.Та же самая вещь не работает в пользовательском компоненте, который является автоматическим добавлением-вводом.При написании в feeMode, затем отражать только в том же formControl.
, но теперь, если начать писать в название компании, то все значения обновляются до верхней группы формы
Создан stackblitzкак показано ниже
https://stackblitz.com/edit/angular-auto-add-input?file=src/app/app.component.html
Пожалуйста, помогите мне, что я здесь пропустил.
группа реактивных форм
professional = this.fb.group({
application: this.fb.group({
jobTitle: ['', [Validators.required]],
feeModel: this.fb.array([this.fb.control('', [Validators.required])], [Validators.required]),
companyName: ['', [Validators.required]],
})
});
пользовательский компонент:
@Component({
selector: 'shared-auto-add-input',
templateUrl: './auto-add-input.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AutoAddInputComponent),
multi: true
}
]
})
export class AutoAddInputComponent implements OnInit, AfterViewInit {
@Input() label: string;
@Input() placeholder: string;
@Input() max: number;
@Input() formArrayName: string;
@Input() errors: ErrorModel[];
arrayControl: FormArray;
form: FormGroup;
constructor(
@Optional() @Host() @SkipSelf()
private controlContainer: ControlContainer,
private fb: FormBuilder,
) { }
ngOnInit() {
if (!this.formArrayName) {
throw new TypeError('\'formArrayName\' is required.');
}
this.form = this.fb.group({
option: this.controlContainer.control.get(this.formArrayName)
});
this.arrayControl = this.form.get('option') as FormArray;
}
ngAfterViewInit() {
}
addOption() {
this.arrayControl.push(this.fb.control('', this.controlContainer.control.get(this.formArrayName).validator));
}
removeOption(index: number) {
this.arrayControl.removeAt(index);
}
stopNew(option, i) {
return option.value === ''
|| i !== this.arrayControl.controls.length - 1
|| (this.max && this.arrayControl.controls.length === +this.max);
}
getErrors(error: FormControl) {
let result = [];
if (this.errors) {
result = this.errors.filter((message) => {
return error.hasError(message.key);
});
}
return result;
}
}