こんな感じのarray絵を動的に追加できるようにしました
時間もなく、リファクタリングなどもできていませんが、とりあえず動いているコードの概要部分を共有します
必要ない部分も入っていますが、要所は確認できるはずなので、
参考にしてください
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | // Component部分 public setting: Setting; public files: File[]; public isNew: boolean = true; public user: User; public settingForm: FormGroup; public detailFormArray: FormArray; constructor( private readonly route: ActivatedRoute, private readonly fileService: FileService, private readonly router: Router, private readonly authService: AuthService, private readonly settingService: SettingService, private readonly fb: FormBuilder) { } public ngOnInit(): void { this.route.params.forEach((params: Params) => { if (params.id === 'new') { this.setting = new Setting(); this.initSettingForm(); } else { this.settingService.findOne(params.id).then((setting: Setting) => { this.setting = setting; }).catch((e) => { console.log(e); }).finally(() => { this.isNew = false; this.initSettingForm(); }); } this.user = this.authService.user; this.fileService.findAll().then((files: File[]) => { this.files = files; }).catch((err) => { console.log(err); }); }); } public initSettingForm() { this.settingForm = this.fb.group({ title: ['', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(320) ]) ], fileId: ['', Validators.compose([ Validators.required, ]) ], details: this.fb.array([]) }); this.settingForm.controls['title'].setValue(this.setting.title); this.settingForm.controls['fileId'].setValue(this.setting.fileId); this.settingForm.controls['details'].setValue(this.setting.details); } public createDetail(): FormGroup { // tslint:disable-next-line:new-parens return this.fb.group(new SettingDetail); } public addDetail() { this.detailFormArray = this.settingForm.get('details') as FormArray; this.detailFormArray.push(this.createDetail()); } // html <div class="row m-5"> <div class="col-12" *ngIf="settingForm"> <form [formGroup]="settingForm" class="text-center border border-light p-5"> <p class="h4 mb-4">{{isNew ? '設定を追加' : '設定の更新'}}</p> <label class="col-form-label">タイトル</label> <input name="title" formControlName="title" type="text" class="form-control mb-4" placeholder="後ろに文字入れる"> <label class="col-form-label">対象ファイル</label> <select formControlName="fileId" class="form-control form-control mb-4"> <option *ngFor="let file of files" [value]="file.id">{{file.filename}}</option> </select> <button class="btn btn-primary" (click)="addDetail()">追加</button> <p class="h4 mb-4">設定の詳細設定</p> <div formArrayName="details"> <div *ngFor="let detail of ValueFormControl.controls; let i = index;" [formGroupName]="i"> <!-- <label class="col-form-label">ターゲットカラム</label>--> <input formControlName="targetColumn" type="text" class="form-control mb-4" placeholder="対象のカラム"> <!-- <label class="col-form-label">Start word</label>--> <input formControlName="startWord" type="text" class="form-control mb-4" placeholder="どこから開始？"> <!-- <label class="col-form-label">End word</label>--> <input formControlName="endWord" class="form-control mb-4" placeholder="どこで終わる？"> </div> </div> <button type="submit" class="btn btn-info btn-block my-" (click)="onSubmit()" [disabled]="!settingForm.valid">情報更新</button> </form> </div> </div> |
目次
参考記事
Angular 2 Cannot find control with unspecified name attribute on formArrays
Dynamically adding form fields using Angular formArray
Adding to the FormArray Dynamically
