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

Question

我有一个表单输入字段，候选人必须在其中输入他的技能。所以我做了一个芯片输入字段。问题是当我重置表单时，芯片的值被清除，但芯片 View 仍然存在。我已经关注了这个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'
    })
]
})

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

Answer 1

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

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