我有以下列出问题的表格,并有一个答案字段。 api循环列出的问题,所有问题都必须具有相同的字段名称。一切正常,问题是我不能提交除最后一个表单以外的所有表单值。有什么方法可以将表单控件名称用于多个字段。
move-maker-add-component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { ApiService } from 'src/app/shared/services/api.service';
import { AuthService } from "src/app/shared/services/auth.service";
import { Router } from '@angular/router';
@Component({
selector: 'app-move-makers-add',
templateUrl: './move-makers-add.component.html',
styleUrls: ['./move-makers-add.component.scss']
})
export class MoveMakersAddComponent implements OnInit {
moveMakerForm: FormGroup;
moveMakerId:any;
moveMakers:any='';
answer:any;
id:string='';
constructor(public authService: AuthService,private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }
ngOnInit() {
this.getMoveMaker();
this.moveMakerForm = this.formBuilder.group({
'moveMakerId' : [null, Validators.required],
'answer' : [null, Validators.required],
});
}
getMoveMaker() {
this.api.getMoveMakers().subscribe(data => {
this.moveMakers = data;
});
}
onFormSubmit(form:NgForm) {
this.api.addMoveMaker(form)
.subscribe(res => {
this.router.navigate(['/dashboard']);
}, (err) => {
console.log(err);
});
}
}
move-maker-add.component.html
<app-header></app-header>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_sidebar.html -->
<app-nav></app-nav>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-8 grid-margin stretch-card offset-2">
<div class="card">
<div class="card-body">
<h4 class="card-title" style="text-align:center;">{{ 'MOVE_MAKERS' | translate }}</h4>
<form class="forms-sample" [formGroup]="moveMakerForm" (ngSubmit)="onFormSubmit(moveMakerForm.value)">
<div class="form-group" *ngFor="let moveMaker of moveMakers">
<label for="exampleTextarea1">{{moveMaker.question}}</label>
<input type="text" class="form-control" formControlName="moveMakerId" id="exampleInputName1" value="{{moveMaker.id}}" >
<textarea class="form-control" id="exampleTextarea1" formControlName="answer" rows="4"></textarea>
</div>
<button class="btn btn-light">{{ 'CANCEL' | translate }}</button>
<button type="submit" class="btn btn-gradient-primary mr-2">{{ 'SAVE' | translate }}</button>
</form>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<script src="../../vendors/js/vendor.bundle.addons.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="../../js/off-canvas.js"></script>
<script src="../../js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="../../js/file-upload.js"></script>
<!-- End custom js for this page-->
<app-footer></app-footer>
MoveMaker.ts
export class UserMoveMaker {
answer : any;
moveMakerId : any;
}
答案 0 :(得分:1)
我通常使用不同的值动态添加 formControlName ,然后根据需要在 .ts 文件中添加验证器。 在这种情况下,它看起来像这样:
move-maker-add.component.html
<input type="text" class="form-control" [formControlName]="moveMaker.id" id="exampleInputName1" value="{{moveMaker.id}}" >
move-maker-add-component.ts
getMoveMaker() {
this.api.getMoveMakers().subscribe(data => {
this.moveMakers = data;
this.moveMakers.forEach((moveMaker ) => this.moveMakerForm .addControl(moveMaker.id, new FormControl('', Validators.required)));
});
}
答案 1 :(得分:0)
所实现的是反应形式和模板驱动的混合。 如果您可以采用任何一种方法,那就更好了。
关于反应形式方法,可以使用FormArray来实现。 示例-https://stackblitz.com/edit/angular-material-editable-table-fazhbc?file=src%2Fapp%2Fapp.component.html
对于模板驱动的表单,请替换您的(ngSubmit)=“ onFormSubmit(moveMakers)”