typescript 如何在 Angular 2 上推送没有 FormBuilder 的 FormArray
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43841140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to push on FormArray without FormBuilder on Angular 2
提问by Storm Spirit
I have form array, I am having hard time solving this.
我有表单数组，我很难解决这个问题。
this is my current code
这是我当前的代码
.ts
.ts
ngOnInit() {
this.item = this.fb.group({
codeId: ['', Validators.pattern(/^\d+$/)],
name: ['', [Validators.required, Validators.minLength(3)]],
stepTextarea: ['', []],
steps: [this.fb.array([]), []]
});
}
addProcedure (e): void {
e.preventDefault();
const control = <FormGroup>this.item;
const steps = <FormArray>this.item.controls['steps'];
steps.push(control.get('stepTextarea').value);
control.get('stepTextarea').setValue("", {onlySelf: true})
}
onSubmit({value, valid}: {value: Item, valid: boolean}): void {
const control = <FormGroup>this.item;
console.log(value);
}
.html
.html
<ol ngFor [ngForOf]="item.get('steps').controls">
<span [formGroupName]="i">{{i}}</span>
</ol>
I am having hard time how to populate and also push. I cant find any tutorial.
我很难如何填充和推送。我找不到任何教程。
EDIT
编辑
I want something like this on submit
我想要这样的东西提交
{
codeId: 123,
name: "wew",
stepTextarea: "",
steps: ['asdjlkas','12312','12321']
}
回答by AJT82
Since you want the steps to look like this on submit:
由于您希望提交时的步骤如下所示：
steps: ['asdjlkas','12312','12321']
you shouldn't use formGroup inside steps.
你不应该在步骤中使用 formGroup 。
The build of the form should look like this:
表单的构建应如下所示：
ngOnInit() {
this.item = this.fb.group({
codeId: ['', Validators.pattern(/^\d+$/)],
name: ['', [Validators.required, Validators.minLength(3)]],
stepTextarea: [''],
steps: this.fb.array([]) // do not enclose steps inside an array
});
}
EDIT:
编辑：
This would be the way your addProcedurewould look like:
这将是你的addProcedure样子：
addStep() {
const control = <FormArray>this.item.get('steps');
// push the value from stepTextArea to array
control.push(this.fb.control(this.item.get('stepTextArea').value))
// reset
this.item.get('stepTextArea').reset()
}
And your template would look like this:
您的模板将如下所示：
<div formArrayName="steps">
<h3>Steps: </h3>
<ol *ngFor="let step of item.get('steps').controls; index as i">
<span>{{step.value}}</span>
</ol>
Original answer with solution of how to do FormArray:
有关如何执行 FormArray 的解决方案的原始答案：
addProcedureshould look like this:
addProcedure应该是这样的：
addProcedure (e): void {
const steps = <FormArray>this.item.get('steps');
steps.push(this.fb.control())
}
And your template for formarray should look something like this:
您的 formarray 模板应如下所示：
<div formArrayName="steps">
<div *ngFor="let step of item.controls.steps.controls; let i = index" >
<label>Step {{i+1}} </label>
<input [formControlName]="i" />
</div>
</div>
