我试图使用FormArray
完成动态复制,但我无法做到。请检查JSFiddle上的表格。无法使用formArray动态复制控件
component.html
<div class="form-group">
<div formArrayName="nqCoordinators">
<button class="col-md-offset-1 col-md-1 btn btn-default" type="button">
Add Coordinator
</button>
<div class="form-group" [ngClass]="{'has-error': (agencyForm.get('nqCoordinators').touched || agencyForm.get('nqCoordinators').dirty) && !agencyForm.get('nqCoordinators').valid}"
*ngFor="let nqCoordinator of nqCoordinators.controls; let i=index">
<label class="col-md-2 control-label" [attr.for]="i">Coordinator</label>
<div class="col-md-8">
<input class="form-control" id="i" type="text" placeholder="NQ Coordinator" formControlName="i" />
</div>
</div>
</div>
</div>
component.ts
import {
Component,
OnInit
}
from '@angular/core';
import {
FormGroup,
FormControl,
FormBuilder,
Validators,
FormArray
}
from '@angular/forms';
import {
ActivatedRoute,
Router
}
from '@angular/router';
import {
Subscription
}
from 'rxjs/Subscription';
@Component({
templateUrl: './newq.component.html'
})
export class CreateNewQComponent implements OnInit {
pageTitle: string;
agencyForm: FormGroup;
private sub: Subscription;
get nqCoordinators(): FormArray {
return <FormArray>this.agencyForm.get('nqCoordinators');
}
constructor(private route: ActivatedRoute, private fb: FormBuilder, private router: Router) {}
//myOptions: IMultiSelectOption[] = [
// { id: 1, name: 'Option 1' },
// { id: 2, name: 'Option 2' },
//];
ngOnInit(): void {
this.agencyForm = this.fb.group({
nqCoordinators: this.fb.array([]),
//qAdvisors: '',
nq1: '',
nq2: '',
nq3: '',
nq4: '',
nqCoordinators: this.fb.array([]),
nqStartDate: ''
});
this.agencyForm.controls['salesRep'].valueChanges
.subscribe((selectedOptions) => {
// changes
});
this.sub = this.route.params.subscribe(
params => {
let id = +params['id'];
if (id === 0)
this.pageTitle = 'Add Q';
else
this.pageTitle = 'Edit Q';
}
);
}
add() {
console.log(this.newQForm);
console.log('Saved: ' + JSON.stringify(this.newQForm));
}
addAgency() {
console.log(this.newQForm);
console.log('Saved: ' + JSON.stringify(this.newQForm));
}
backBtnClick() {
this.router.navigate(['/newq']);
}
}
你是什么意思*重复控件*?究竟是什么问题,目前尚不清楚?目前的行为是什么?预期的行为是什么? – Alex
我试图动态复制协调员的文本框字段(如果你能够看到在JSFiddle),它不会工作。 – user1704842
我想你的意思是在数组中添加更多的协调器?我猜想是这样的,不得不确定:)我会看看你的代码,看看我们是否可以找出这个问题。 – Alex