Question

每次尝试保存所选项目后，我都希望清除该列表或清空。例如，用户选择了一个项目 - 选择保存。在控制台中，您将查看已选择的对象。现在，如果您选择其他项目并选择保存，您仍将看到在控制台中选择的上一个项目。最好是在每次保存后，阵列都被清除。

首先保存：

selectedMessages
Array(1)
{messageID: 222, message: "text"}

第二次保存：

selectedMessages
Array(2)
{messageID: 222, message: "text"}
{messageID: 331, message: "text Two"}

component.ts

rMessages: Message[] = [];
  aMessages: Message[] = [];


constructor( 
  public formBuilder: FormBuilder,
  ) { 
    this.messageForm = formBuilder.group({
      selectedMessages: this.formBuilder.array([])
    })
   }
    save(form){
    console.log(form.value.selectedMessages)
    }

select(rmessage:Message, isChecked: boolean){
    const selectedMessages = <FormArray>this.messageForm.controls.selectedMessages;
    if(isChecked) {
      selectedMessages.push(new FormControl(rmessage));  
    } else {
      let index = selectedMessages.controls.findIndex(x => x.value.messageID == rmessage.messageID);
      selectedMessages.removeAt(index);
    }
  }
buildChecked() {
    const arr = this.rMessages.map(message => {
      console.log(this.formBuilder.control(message.messageID))
      return this.formBuilder.control(message.messageID)
    });
    return this.formBuilder.array(arr);
  }

HTML

<form [formGroup]="messageForm" (ngSubmit)="save(messageForm)">
    <ion-list active text-wrap *ngSwitchCase="'received'" >
      <div class="items"> 

    <ion-item *ngFor="let rmessage of rMessages; index as i">
        <ion-label>
          {{rmessage.message}}
        </ion-label>
        <ion-checkbox (ionChange)="select(rmessage, $event.checked)" value="rmessage"></ion-checkbox>
    </ion-item>

      </div>
        <button ion-button full type="submit"  style="font-size:1.8rem">save</button>
    </ion-list>
  </form>

更新 - 重置无效。得到null。

rMessages: Message[] = [];
      aMessages: Message[] = [];


    constructor( 
      public formBuilder: FormBuilder,
      ) { 
        this.messageForm = formBuilder.group({
          selectedMessages: this.formBuilder.array([])
        })
       }
        save(form){
this.rMessages = this.rMessages.filter((resultTwo) => {
      return !form.value.receivedMessages.find((resultOne) => {

        return resultTwo.messageID === resultOne.messageID
      })
    })
       this.aMessages = this.aMessages.concat(form.value.receivedMessages.filter((resultOne) => {
        console.log(resultOne, 'results')

        return resultOne

    }))
        this.messageForm.reset()
        }

    select(rmessage:Message, isChecked: boolean){
        const selectedMessages = <FormArray>this.messageForm.controls.selectedMessages;
        if(isChecked) {
          selectedMessages.push(new FormControl(rmessage));  
        } else {
          let index = selectedMessages.controls.findIndex(x => x.value.messageID == rmessage.messageID);
          selectedMessages.removeAt(index);
        }
      }
    buildChecked() {
        const arr = this.rMessages.map(message => {
          console.log(this.formBuilder.control(message.messageID))
          return this.formBuilder.control(message.messageID)
        });
        return this.formBuilder.array(arr);
      }

Answer 1

您可以清除表单

this.messageForm.reset()

并且文本将保留在控制台中

Answer 2

如果要清除数组并将其设置为空，请使用setControl()

this.messageForm.setControl('selectedMessages', this.formBuilder.array([]))

这将取代现有的数组。

Angular FormBuilder没有重置数组

2 个答案: