Изменить логическое значение i-го поля ввода при удалении нажатия кнопки в Реактивной форме

Question

Я пытаюсь создать динамическое поле ввода, используя реактивную форму. В моем проекте сначала я генерирую количество полей ввода согласно Имена, поступающие из API , а затем я также могу создать новое поле вводаи нажмите кнопку. С каждым вводом есть кнопка удаления. С этим пользователем можно удалить это конкретное поле.Я успешно могу удалить это поле, но теперь мне нужно, чтобы значение имени поля и его uuid (который я получаю из API с именем) при нажатии кнопки удаления. В настоящее время я получаю этот ответ при отправке формы.

isdelete: false
screenname: "first"
screenuuid: "25ef9fde-bd02-4225-8c64-9cc12bea523"

По умолчанию для isdelete установлено значение false на FormSubmit, но когда пользователь удаляет этот экран, я хочу изменить логическое значение isdelete на true для этого экрана. Я пытался изменить логическое значение при удалении поля ввода, но не смогсделать это. Отослать Я получаю тот же ответ, как указано выше. Вот мой код.

Файл Component.ts

export class ScreenmodalComponent implements OnInit {

  @Input() screendetails;
  personalForm : FormGroup;
  arrayItems: any = [];
  screenList: string;
  isDelete: boolean = false;

  constructor(private activeModal: NgbActiveModal, private formbuilder: FormBuilder, private pagesService: PagesService, private utilService: UtilService) {}

  ngOnInit() {
    this.personalForm = this.formbuilder.group({
      other: this.formbuilder.array([ ])
    });
    // Api call
    this.pagesService.GetScreens('').then(res => {
      console.log('get screens api', res);
      for (let i = 0; i < res['data']['length']; i++) {
        this.arrayItems = res['data'][i]['name'] ;
        this.addanother(res['data'][i]['name'],res['data'][i]['screen_uuid'],this.isDelete);
      }
    }).catch(error => {
    this.utilService.showError('Something went wrong', 'Error');
    console.log('err is', error);
    });
  }


  addanother(data: any,uuid:any,isdelete:boolean = false):void {
    (<FormArray>this.personalForm.get('other')).push(this.addanotherForm(data,uuid,isdelete));
  }
  addanotherForm(data:any,uuid:any,isdelete:boolean): FormGroup{

    return this.formbuilder.group({
      screenname: [data],
      screenuuid: [uuid],
      isdelete:   [isdelete]
    });
  }

clear(i : number){ //this function removes input field
  console.log("dvdv"+i);
  (<FormArray>this.personalForm.get('other')).removeAt(i);
}

onSubmit(): void {
  console.log(this.personalForm.value);
}

closeModel() {
    this.activeModal.close();
  }
}

Файл Component.html

  <div class="custom_modal pb-3">
    <div class="modal-header border-0 p-1 pl-3 pr-3 d-flex justify-content-between align-items-center">
      <h3 class="m-0">Project: {{screendetails.name}}</h3>
      <button type="button" class="close" data-dismiss="modal" (click)="closeModel()">&times;</button>
    </div>

    <div class="modal-body p-3">
      <div class="body_top d-flex justify-content-between mb-4 mt-2 align-items-center">
        <h3 class="title m-0">Add Screens</h3>
      </div>
      <form [formGroup]="personalForm" (ngSubmit)="onSubmit()">
      <div formArrayName="other" class="form-group" *ngFor="let other of personalForm.get('other').controls; let i = index" >
        <div [formGroupName] = "i">
      <div class="screen_row mb-4">
        <div class="row">
          <div class="col-md-3 col-sm-3 d-flex align-items-center">
            <label>Screen Name</label>
          </div>
          <div class="col-md-8 col-sm-8 pl-0 pl-sm-3">
              <input type="text" class="form-control rounded-0" formControlName="screenname" name="screenname" >
          </div>
          <div class="col-md-1 col-sm-1 d-flex align-items-center justify-content-center pl-0 pl-sm-3">
              <button type="button" class="close" (click)="clear(i)">&times;</button> //delete button
          </div>
        </div>
      </div>
    </div>
    </div>

    <div class="modal-footer border-0 d-table w-100">
        <button type="button" class="btn-primary float-left" (click)="addanother('',null,false)">Add New Screen</button>
        <div class="float-right">
          <button type="button" class="btn-primary mr-3" data-dismiss="modal" (click)="onSubmit();">Apply</button>
          <button type="button" class="btn-primary cancle" data-dismiss="modal" (click)="closeModel()">Cancel</button>
        </div>
    </div>
  </form>
</div>
  </div>

Пожалуйста, помогите мне изменить логическое значение i-го поля ввода, если оно удалено. Ваша маленькая помощь будет принята. Спасибо

Answer 1

Я думаю, что сначала вам нужно правильно обновить arrayItems, чтобы сохранить изменения экранов.

for (let i = 0; i < res['data']['length']; i++) {
    this.arrayItems.push(res['data'][i]['name']);
    this.addanother(res['data'][i]['name'],res['data'][i]['screen_uuid'],this.isDelete);
}

Затем в функции очистки попробуйте обновить конкретное значение isdelete для экрана в arrayItems.

clear(i : number){ //this function removes input field
    console.log("delete item index:"+i);
    arrayItems[i]["isdelete"] = true;
    (this.personalForm.get('other') as FormArray).removeAt(i);
    // Try this if you want to update form value as well
    ((this.personalForm.get('other') as FormArray).at(i) as FormGroup).get("isdelete").setValue(true);
}

Надеюсь, это поможет.