Currently, patchValue doesn't support update FormArray.

The workarround is you need to empty the form array first, then add items back.

import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
import {FormBuilder, FormArray, FormGroup, FormControl, Validators} from '@angular/forms';
import {Meal} from '../../../shared/services/meals/meals.service';
@Component({
selector: 'meal-form',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['meal-form.component.scss'],
template: `
<div class="meal-form">
<form [formGroup]="form">
<div class="meal-form__name">
<label>
<h3>Meal name</h3>
<input type="text"
formControlName="name"
placeholder="e.g. English Breakfast">
<div class="error" *ngIf="required">
Workout name is required
</div>
</label>
</div> <div class="meal-form__food">
<div class="meal-form__subtitle">
<h3>Food</h3>
<button
type="button"
(click)="addIngredient()"
class="meal-form__add">
<img src="/img/add-white.svg" alt="Add food">
Add food
</button>
</div>
<div formArrayName="ingredients">
<label *ngFor="let c of ingredients.controls; index as i;">
<input type="text" [formControlName]="i" placeholder="e.g Eggs">
<span
class="meal-form__remove"
(click)="removeIngredient(i)"
></span>
</label>
</div> <div class="meal-form__submit">
<div>
<button
*ngIf="!exists"
type="button" class="button" (click)="createMeal()">
Create Meal
</button>
<button
*ngIf="exists"
type="button" class="button" (click)="updateMeal()">
Save
</button>
<a
[routerLink]="['../']"
class="button button--cancel">
Cancel
</a>
</div>
<div class="meal-form__delete" *ngIf="exists">
<div *ngIf="toggled">
<p>Delete item?</p>
<button
class="confirm"
type="button"
(click)="removeMeal()">
Yes
</button>
<button
class="cancel"
type="button"
(click)="toggle()">
No
</button>
</div> <button
class="button button--delete"
type="button"
(click)="toggle()">
Delete
</button>
</div>
</div>
</div>
</form>
</div>
`
})
export class MealFormComponent implements OnChanges { toggled = false;
exists = false; @Input()
meal: Meal; @Output()
create = new EventEmitter<Meal>(); @Output()
update = new EventEmitter<Meal>(); @Output()
remove = new EventEmitter<Meal>(); form = this.fb.group({
name: ['', Validators.required],
ingredients: this.fb.array([''])
}); get ingredients() {
// Type check for ingredients, mark as FormArray
// Therefore when we use 'ingredients',
// We can get auto complete
return this.form.get('ingredients') as FormArray;
} get required() {
return (
this.form.get('name').hasError('required') &&
this.form.get('name').touched
);
} constructor(private fb: FormBuilder) { } ngOnChanges(changes: SimpleChanges): void {
if (this.meal && this.meal.name) {
this.exists = true; this.emptyIngredients(); const value = this.meal;
this.form.patchValue(value); if (value.ingredients) {
for (const item of value.ingredients) {
this.ingredients.push(new FormControl(item));
}
}
}
} emptyIngredients() {
while (this.ingredients.controls.length > ) {
this.ingredients.removeAt();
}
} createMeal() {
if (this.form.valid) {
this.create.emit(this.form.value);
}
} updateMeal() {
if (this.form.valid) {
this.update.emit(this.form.value);
}
} removeMeal() {
this.remove.emit(this.form.value);
} addIngredient() {
// Add a new FormControl to FormArray
this.ingredients.push(new FormControl(''));
} removeIngredient(i: number) {
this.ingredients.removeAt(i);
} toggle() {
this.toggled = !this.toggled;
}
}

[Angular] Update FormArray with patchValue的更多相关文章

  1. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

  2. Node.js && Angular && TypeScript 环境安装与更新

    安装 Node.js 下载并安装Node.js Angular 执行命令 npm install -g @angular/cli 参考资料: angular quickstart TypeScript ...

  3. Speeding up AngularJS apps with simple optimizations

    AngularJS is a huge framework with that already has many performance enhancements built in, but they ...

  4. Angular4.0.0发布总览文章

    翻译自angular.io上的关于4.0.0版本发布的文章,内容主要是介绍了4.0.0版本下的改进以及接下来还会有的其他更新,4.0.0其实已经出来好多天了,截止目前都已经到了4.0.1版本了,这也是 ...

  5. 记录项目版本升级angular4 ~ angular5

    前言: 在上一篇ng4文章<angular4--实际项目搭建总结>中说过,等到ng5正式发布,并且蚂蚁的NG ZORRO兼容ng5之后,我会对ng4项目进行升级.这篇文章就是大概说下升级的 ...

  6. Angular5的new feature

    https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced Version 5.0.0 of Angular ...

  7. Angular4.0.0正式发布,附新特性及升级指南

    本文首发地址:Angular4.0.0正式发布,附新特性及升级指南 作者|孙薇 编辑|尾尾 经历了6个RC版本之后,Angular项目组终于发布了新版,即正式版 Angular 4.0.0.新版的 A ...

  8. [Angular] Working with FormArray

    'FormArray' can work with array of 'FormGroup' or 'FormControl'. form = new FormGroup({ stock: new F ...

  9. Angular 从入坑到挖坑 - 表单控件概览

    一.Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验. 对应官方文档地址 ...

随机推荐

  1. 【Codeforces Round #460 (Div. 2) A】 Supermarket

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 就是让你求m*(ai/bb)的最小值 [代码] #include <bits/stdc++.h> #define dou ...

  2. PIM-DM协议内核触发机制及协议执行机制记录

    PIM-DM和PIM-SM是组播路由ASM(随意信源组播)中的两种不同模式.相对PIM-SM的组播注冊机制.PIM-DM的扩散机制显得更加粗犷. 一.PIM-DM无需向内核注冊pimreg虚接口. 可 ...

  3. [Android实例] 高速静默更新,低流量耗费,让APP活跃起来!

    大家好.我是csdn的新人,给大家带来一个做了一个星期的SDK,能够实现将Android APP碎片化管理.自由更新,实时更新,低流量耗费的更新~~ Zag Whim Renewal A system ...

  4. Intersection between a 2d line and a conic in OpenCASCADE

    Intersection between a 2d line and a conic in OpenCASCADE eryar@163.com Abstract. OpenCASCADE provid ...

  5. solr 亿万级数据查询性能測试

    废话不多说,我电脑配置 i7四核cpu 8G内存 插入数据文档中有5个字段,当中有两个分词.一个int,一个date 批量插入測试一次10万循环10次总共100万用时85秒 批量插入測试一次10万循环 ...

  6. android 图片特效处理之光晕效果

    这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...

  7. 66.app.use(express.static)

    转自:https://blog.csdn.net/u010977147/article/details/60956502

  8. STANDBY REDO LOG

    SRL Introduce 从">ORACLE9i开始,出现了Standby Redo Logs(SRL),9.1开始只有">physical standby支持SRL ...

  9. C++遍历目录+_finddata_t结构体用法

    Struct _finddata_t是用来存储文件各种信息的结构体,使用这个结构体要引用的头文件为“ #include <io.h>”它的结构体定义如下: struct _finddata ...

  10. 03003_MySQL

    1.之前已经进行过MySQL的安装,参考03002_MySql数据库的安装和配置 : 2.登录MySQL数据库 (1)启动mysql服务:net start mysql   : (2)MySQL是一个 ...