Удалить значение в поле ввода при обновлении края - PullRequest
Новая
       24

Удалить значение в поле ввода при обновлении края

0 голосов
/ 13 июня 2019

Я сделал несколько полей ввода. Каждое поле ввода имеет 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}$')]]
      });
  }
}

1 Ответ

0 голосов
/ 14 июня 2019

Пожалуйста, обратитесь к следующему коду, вы можете установить значение по умолчанию для управления вводом текста.

Код на 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) { }
}

Более подробный код, вы можете проверить этот образец . И вы также можете обратиться к этому руководству , чтобы добавить проверку формы.

Кроме того, я думаю, что вы также можете попытаться использовать функции JavaScript для очистки значения, в событии загрузки страницы вы можете получить связанные элементы ввода и очистить значение.

...