如何在formArray中推送字符串数组？

Question

我需要创建这个：

instructions: ['value one' , 'value two' , 'value three'];

我正在使用 formArray 并首先在 stackblitz 上检查我的代码： https://stackblitz.com/edit/formarray-obj?file=app/app.component.ts

html:

<div class="form">
    <form id="form" [formGroup]="filmForm" (ngSubmit)="save()">
        <button type="button" (click)="addItem()"> add new row</button>
        <div formArrayName="instructions" *ngFor="let a of filmForm.get('instructions').controls; let i = index">
            <div [formGroupName]="i" style="margin-bottom: 10px;">
                <label for="name">Name:</label>
                <input type="text" name="name" formControlName="instructions">
                <br><br>
            </div>
        </div>
        <div class="submit">
            <button type="submit">Save</button>
        </div>
    </form>
</div>

TS：

registerForm: FormGroup;
submitted = false;
instructions: FormArray;
filmForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
    this.filmForm = this.formBuilder.group({
        instructions: this.formBuilder.array([this.createItem()])
    })
}

createItem() {
    return this.formBuilder.group({
        instructions: ['']
    })
}

addItem() {
    this.instructions = this.filmForm.get('instructions') as FormArray;
    this.instructions.push(this.createItem());
}

save() {
    console.log(this.filmForm.value)
}

我正在发送对象数组：检查 stackblitz console.log 我发送喜欢

instructors = [{instructs : 'value one'} , {instructs : 'value one'}..]

但我需要发送：

 instructors = ["value one" , "value two"];

Answer 1

您可以通过两种方式进行此操作。

1 - 在 save() 中使用 .map

对于想要的输出，可以使用.map in save()函数：

save() {
  const instructions = this.filmForm.value.instructions.map(inst => inst. instruction);

  console.log(instructions);
}

所需的输出将是：

["value one" , "value two"]

2 - 使用像 ng-select 这样的标签输入控件

您的用例看起来像是用于说明的标签控制用例。 有一个流行的库@ng-select/ng-select，它有一个tags 控件。

您可以在 this stackblitz 上查看此库在您的用例中的使用情况。

方法 1 是最简单的方法，但我建议您在方法 2 中使用标签控制以获得良好的用户体验。

Answer 2

你可以试试这个..我有同样的问题。

制作表格

form = new FormGroup({
instructorsArray: new FormArray([]),
})

  get instructors(): FormGroup {
    return FormControl('')
  }

 addInstructors() {
    this.instructors.push(this.instructors);
  }