iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

Angular10 實作教學系列 第 24

NG10鐵人賽 - 24 - FormArray 實作

  • 分享至 

  • xImage
  •  

結果

https://i.imgur.com/ThRmBvV.gif

html

<form (ngSubmit)="onSubmit()" [formGroup]="form">
    <ng-container formArrayName="defaultArray">
        <ng-container *ngFor="let item of defaultList.controls;let index = index" [formGroup]="item">
        <p>{{index + 1}}</p>
        <div class="form-group text-left">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" placeholder="姓名" name="name" formControlName="name">
        </div>
        <div class="form-group text-left">
            <label for="job">職位</label>
            <input type="text" class="form-control" id="job" placeholder="職位" name="job" formControlName="job">
        </div>
        </ng-container>
    </ng-container>
    <button mat-flat-button class="mb-3 align-items-center" color="primary" (click)="addDefault()">
    <mat-icon [inline]="true">add</mat-icon>新增
    </button>
    <hr>
    <button type="submit" class="btn btn-master" [disabled]="form.invalid">送出</button>

    {{form.value | json}}
</form>

ts

form = new FormGroup({
    defaultArray: new FormArray([
        new FormGroup({
            name: new FormControl(''),
            job: new FormControl(''),
        })
    ])
});

get defaultList() {
    return this.form.get('defaultArray') as FormArray;
}

addDefault() {
    this.defaultList.push(new FormGroup({
        name: new FormControl(''),
        job: new FormControl(''),
    }));
}

上一篇
NG10鐵人賽 - 23 - FormArray 介紹
下一篇
NG10鐵人賽 - 25 - ReactiveForm Validator 驗證
系列文
Angular10 實作教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言