Удалить валидатор после отправки - PullRequest
Новая
       147

Удалить валидатор после отправки

3 голосов
/ 29 мая 2020

Я создал два текстовых поля: одно для заголовка, а другое для имени.

Я использую проверки, если текстовые поля не заполнены, поэтому информация отправляется, только если оба заполнены.

Моя проблема в том, что после отправки я пытаюсь очистить значения переменных, и при очистке этого значения появляются сообщения проверки.

Есть ли способ успешно отправить и очистить значение переменных, валидатор не отображается?

DEMO

html

<div style="margin-top:16px;width:50%">
    <dx-text-box placeholder="title..." [showClearButton]="true" [(ngModel)]="title">
        <dx-validator>
            <dxi-validation-rule type="required" message="Insert Title">
            </dxi-validation-rule>
        </dx-validator>
    </dx-text-box>
</div>
<div style="margin-top:16px;width:50%">
    <dx-text-box placeholder="name..." [showClearButton]="true" [(ngModel)]="name">
        <dx-validator>
            <dxi-validation-rule type="required" message="Insert Name">
            </dxi-validation-rule>
        </dx-validator>
    </dx-text-box>
</div>

<dx-button text="Submit" [useSubmitBehavior]="true" (onClick)="Save()"></dx-button>

.ts 

title: string;
name: string;

Save(){
  if(this.title == "" || this.title == undefined || this.name == "" || this.name == undefined){
  }
  else{
    alert("Sucess !!");
    this.title = "";
    this.name = "";
  }
}

Проблема

image

Здесь я заполнил текстовые поля и успешно отправил. Я очистил значение переменных, но при этом активируется валидатор, хотя на самом деле все должно было быть в исходном состоянии: (

Ответы [ 2 ]

0 голосов
/ 30 мая 2020

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

  @ViewChildren(DxValidatorComponent) validatorViewChildren: QueryList<DxValidatorComponent>;

  private clearDxValidators = () => {
    this.validatorViewChildren.toArray().map(ref => {
      ref.instance.reset();
    })
  }

подробнее о reset ()

0 голосов
/ 29 мая 2020

В качестве быстрого обходного пути вы можете обернуть шаблон в форму, а затем использовать это, чтобы проверить, является ли он нетронутым, чтобы узнать, показывать ли сообщение валидатора или нет. Затем вместо того, чтобы назначать пустую строку своим свойствам, вы можете сбросить форму (после импорта ее в компонент через ViewChild ()).

Это действительно похоже на взлом, потому что набор инструментов, который вы используете должен это знать автоматически. Если нет, то зачем его использовать.

Кроме того, я предлагаю вам также начать читать на Angular Reactive Forms .

В любом случае, я прикрепил свой предложил изменения в Stackblitz .

Удачи с вашим проектом!

...