Angular：如何重置 matChipList 输入字段和 Google Recaptcha？答案

【问题标题】：Angular: How to reset matChipList input field and Google Recaptcha?Angular：如何重置 matChipList 输入字段和 Google Recaptcha？
【发布时间】：2020-10-28 14:36:14
【问题描述】：

我有一个表单中的输入字段，候选人必须输入他的技能。所以我做了一个芯片输入字段。问题是当我重置表格时，芯片中的值被清除但芯片视图仍然存在。我已经按照example 关注MatChips，但没有任何效果。以下是我的代码：

@ViewChild('chipList') chipList: MatChipList;
@ViewChild('tags') tags: ElementRef;

profileForm = this.fb.group({tag: this.fb.array([]),
    Recaptcha: [false, Validators.requiredTrue]
});

add(event: MatChipInputEvent, form: FormGroup): void {
    const input = event.input;
    const value = event.value;
    // Add name
    if ((value || '').trim()) {
      const control = <FormArray>form.get('tag');
      control.push(this.initName(value.trim()));
    }
    // Reset the input value
    if (input) {
      input.value = '';
    }
}

remove(form, index) {
  form.get('tag').removeAt(index);
}

get Tags() {
  return this.profileForm.get('tag');
}

get ReCaptcha() {
    return this.profileForm.get('Recaptcha');
}

registerUser(formDirective: FormGroupDirective) {
  for(let i of this.Tags.value) {
    this.skills += i + ',';
  }
  this.skills = this.skills.substring(0, this.skills.length-1);
  this.profileForm.patchValue({
    skills: this.skills,
    mobileNumber: this.MobileNumber.value.replace(/\-/gi, '')
  });
  if(this.ReCaptcha.value == true) {
    this.appService.userRegistration(this.profileForm.value).subscribe(response => {
      if(response.message != "Success.") {
        this.snackbarService.class = 'red-snackbar';
        return this.snackbarService.open('User Registration Unsuccessfull');
      }
      this.router.navigate(['/login']);
      this.snackbarService.class = 'green-snackbar';
      this.snackbarService.open('User Registered Successfully');
    }, error => {
      this.snackbarService.class = 'red-snackbar';
      this.snackbarService.open('Something went wrong');
    });
    formDirective.resetForm();
    this.profileForm.reset();
    this.tags.nativeElement.value = '';
  }
}

HTML

<div class="row">
  <div class="col-md-12">
    <mat-form-field class="example-chip-list" appearance="outline" style="width: 100%;">
      <mat-label>Skills</mat-label>
      <mat-chip-list #chipList formArrayName="tag" matTooltip="Press Enter to seperate skills">
        <mat-chip *ngFor="let name of profileForm.get('tag')['controls']; let i=index;"
          [selectable]="selectable" [removable]="true" (removed)="remove(profileForm, i)">
          {{name.value}}
          <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
        </mat-chip>
        <input #tags [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event, profileForm)">
      </mat-chip-list>
    </mat-form-field>
  </div>
</div>

<recaptcha formControlName="Recaptcha" (scriptError)="onScriptError()"></recaptcha>
<button type="submit" class="float-right" [disabled]="profileForm.invalid || !ReCaptcha"
  class="btnRegister btn">Register</button>

app.module

import { RecaptchaModule } from 'angular-google-recaptcha';

@NgModule({
    imports: [
    RecaptchaModule.forRoot({
      siteKey: 'SITE_KEY'
    })
]
})

这是我点击注册按钮后的当前场景：

【问题讨论】：

标签： angular typescript angular-material frontend recaptcha

【解决方案1】：

改变这一行

this.tags.nativeElement.value = '';

到

this.tags.nativeElement.value = null;

【讨论】：

虽然整个代码可以用更简单的方式编写。如果仍然不能解决问题，请提供其余的相关代码。
如果相关代码的 stackblitz 可用则更好

【解决方案2】：

当您将标签控件实现为表单数组时，可能会出现问题。它不存储控件数组，而是存储值数组。我制作了一个带有“清除表单”按钮的基本堆栈闪电战，希望能模拟您想要实现的目标。

你必须用一个空数组初始化标签formControl，并且在重置表单时，确保它也被设置为一个空数组。

https://stackblitz.com/edit/angular-tn3nai

【讨论】：

【解决方案3】：

您可以尝试分成两种不同的形式，一种用于您的数据，另一种用于重新验证。

通过这种方式，recaptcha 重置不会影响您的数据表单

【讨论】：

我不想在注册时出现这种情况，一切都会像新表格一样重置