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

Posted 2023-02-22

【中文标题】Angular：如何重置 matChipList 输入字段和 Google Recaptcha？

【英文标题】：Angular: How to reset matChipList input field and Google Recaptcha?

【发布时间】：2020-10-28 14:36:14

【问题描述】：

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

TS

@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'
    )
]
)

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

【参考方案1】：

改变这一行

this.tags.nativeElement.value = '';

到

this.tags.nativeElement.value = null;

【讨论】：

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

如果相关代码的 stackblitz 可用则更好

【参考方案2】：

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

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

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

【参考方案3】：

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

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

【讨论】：

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