Как получить массив строк sh в 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

Есть два способа go вперед с этим.

1 - Использование .map в save ()

Для желаемого результата вы можете использовать .map in save() function:

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);
  }