Question

我输入了一些字段。每个输入字段都有一个formControlName，在我的组件的构造函数中，我将设置FormGroup，以便可以验证输入。我的问题是，如果在Edge上刷新浏览器，则不会清除字段的值，并且如果我使用它们的formGroup验证字段，即使其中包含有效值，也将无效。 Edge仅保留文本输入字段的值是可疑的。密码输入字段已正确清除。

有人知道如何解决我的问题吗？

我已经尝试过其他方法，例如在每个输入字段上设置[(ngModel)]，设置autocomplete=off和其他方法。真的很感谢我的每一个帮助。

HTML：

<p>
    <label>Nr*</label>
   <input type="text" formControlName="nr" required>
</p>
<p>
  <label>MNr*</label>
  <input type="text" formControlName="mNr" required>
</p>
<p>
  <label>PIN*</label>
  <input type="password" formControlName="pin" required>
</p>

Component.ts

export class QueryComponent {
  queryForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
      this.queryForm = this.formBuilder.group({
        nr: ['', [Validators.required, Validators.pattern('\\d*$')]],
        mNr: ['', [Validators.required,
          Validators.pattern('^(0041|041|\\+41|\\+\\+41|41)?(0|\\(0\\))?([7] 
            [3-9]{1})(\\d{3})(\\d{2})(\\d{2})$')]],
        pin: ['', [Validators.required, Validators.pattern('\\d{8}$')]]
      });
  }
}

Answer 1

请参考以下代码，您可以为输入文本控件设置默认值。

html页面中的代码：

 <form [formGroup]="heroForm" #formDir="ngForm">

    <div [hidden]="formDir.submitted">

      <div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
        <div class="form-group">

          <label for="name">Name</label>
          <input id="name" class="form-control"
                formControlName="name" required >

          <div *ngIf="name.invalid && (name.dirty || name.touched)"
              class="alert alert-danger">

            <div *ngIf="name.errors.required">
              Name is required.
            </div>
            <div *ngIf="name.errors.minlength">
              Name must be at least 4 characters long.
            </div>
            <div *ngIf="name.errors.forbiddenName">
              Name cannot be Bob.
            </div>
          </div>
        </div>

        <div class="form-group">
          <label for="alterEgo">Alter Ego</label>
          <input id="alterEgo" class="form-control"
              formControlName="alterEgo"  >

          <div *ngIf="alterEgo.pending">Validating...</div>
          <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
            <div *ngIf="alterEgo.errors?.uniqueAlterEgo">
              Alter ego is already taken.
            </div>
          </div>
        </div>

        <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
            Name cannot match alter ego.
        </div>
      </div>

      <div class="form-group">
        <label for="power">Hero Power</label>
        <select id="power" class="form-control"
            formControlName="power" required >
          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
        </select>

        <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
          <div *ngIf="power.errors.required">Power is required.</div>
        </div>
      </div>

      <button type="submit" class="btn btn-default"
             [disabled]="heroForm.invalid">Submit</button>
      <button type="button" class="btn btn-default"
             (click)="formDir.resetForm({})">Reset</button>
    </div>
  </form>

  <div class="submitted-message" *ngIf="formDir.submitted">
    <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
    <button (click)="formDir.resetForm({})">Add new hero</button>
  </div>
</div>

component.ts中的代码：

export class HeroFormReactiveComponent implements OnInit {

  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];

  hero = { name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0] };

  heroForm: FormGroup;

  ngOnInit(): void {
    this.heroForm = new FormGroup({
      'name': new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(/bob/i)
      ]),
      'alterEgo': new FormControl(this.hero.alterEgo, {
        asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
        updateOn: 'blur'
      }),
      'power': new FormControl(this.hero.power, Validators.required)
    },  { validators: identityRevealedValidator }); // <-- add custom validator at the FormGroup level
  }

  get name() { return this.heroForm.get('name'); }

  get power() { return this.heroForm.get('power'); }

  get alterEgo() { return this.heroForm.get('alterEgo'); }

  constructor(private alterEgoValidator: UniqueAlterEgoValidator) { }
}

更多详细信息代码，您可以检查this sample。而且，您还可以参考this tutorial添加表单验证。

此外，我认为您也可以尝试使用JavaScript函数清除值，在页面onload事件中，您可以获取相关的输入元素并清除值。

在刷新边缘上的“输入”字段中删除值

1 个答案: