Настоятельно рекомендуется тем, кто писал угловые формы для , а не , смешивать шаблонно-управляемые и реактивные формы.FormArray является частью Реактивных форм.
В вашем коде есть несколько «управляемых шаблонами» техник форм, которые вы должны рассмотреть, например:
@ViewChild('f') recipeform:FormGroup
Вы определяетеrecipeform
FormGroup в вашем коде, затем генерирует ссылку на него в вашем шаблоне, а затем передает эту ссылку обратно в ваш код.(Я удивлен, что это не вызывает ошибку.)
Я бы порекомендовал:
1) Удаление #f="ngForm"
из вашего шаблона.Это необходимо только для форм-управляемых форм.
2) Замена @ViewChild('f') recipeform:FormGroup
только объявлением для recipeform: FormGroup
.
3) Использование FormBuilder вместо экземпляров FormGroup и FormControl.
4) Это асинхронный вызов: const recipe=this.reservice.getrecipe(this.id)
, если да, вам нужно использовать subscribe
для получения данных.
Вот пример одной из моих реактивных форм с использованием FormBuilderи FormArray:
export class CustomerComponent implements OnInit {
customerForm: FormGroup;
ngOnInit() {
this.customerForm = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.maxLength(50)]],
addresses: this.fb.array([this.buildAddress()])
});
}
addAddress(): void {
this.addresses.push(this.buildAddress());
}
buildAddress(): FormGroup {
return this.fb.group({
addressType: 'home',
street1: ['', Validators.required],
street2: '',
city: '',
state: '',
zip: ''
});
}
}
Вы можете найти полный рабочий пример здесь: https://github.com/DeborahK/Angular-ReactiveForms
У меня есть второй пример в том же репо, который включает в себя код параметра, аналогичный тому, что выделать:
ngOnInit(): void {
this.productForm = this.fb.group({
productName: ['', [Validators.required,
Validators.minLength(3),
Validators.maxLength(50)]],
tags: this.fb.array([]),
description: ''
});
// Read the product Id from the route parameter
this.sub = this.route.paramMap.subscribe(
params => {
const id = +params.get('id');
this.getProduct(id);
}
);
}
getProduct(id: number): void {
this.productService.getProduct(id)
.subscribe(
(product: Product) => this.displayProduct(product),
(error: any) => this.errorMessage = <any>error
);
}
displayProduct(product: Product): void {
if (this.productForm) {
this.productForm.reset();
}
this.product = product;
// Update the data on the form
this.productForm.patchValue({
productName: this.product.productName,
description: this.product.description
});
this.productForm.setControl('tags', this.fb.array(this.product.tags || []));
}
Дайте мне знать, если у вас есть какие-либо вопросы по поводу любого из примеров.