как показать сообщение проверки при нажатии кнопки?

не могли бы вы рассказать мне, как отображать сообщение проверки при нажатии кнопки? вот мой код https://stackblitz.com/edit/angular-ugdbvg?file=src/app/app.component.html

Я хочу отображать required сообщение об ошибке, когда пользователь нажимает кнопку submit.

  <form novalidate [formGroup]="searchForm" class="calform">
      <section class="col-sm-6 bg-white  pl-20 pr-20">

      <div class="form-group col-sm-4 pl-0 error">
          <label class="field-title mb-5">name<span class="color-red fontWt">&nbsp;*</span></label>
          <input type="text" placeholder="Enter name" formControlName="name">
          <p class="message" [hidden]="searchForm.get('name')">Required</p>
        </div>

        <div class="form-group col-sm-4 pl-0 error">
          <label class="field-title mb-5">last name <span class="color-red fontWt">&nbsp;*</span></label>
          <input type="text" placeholder="Enter last name" formControlName="lastName">
          <p class="message" [hidden]="searchForm.get('lastName')">Required</p>
        </div>
        <button (click)="submitHandler()">submit</button>
      </section>
    </form>

js

this.searchForm = this.fb.group({
      name: ['', Validators.required],
          lastName: ['', Validators.required]

    });

javascript angular angular-reactive-forms
person user944513    schedule 24.08.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Добавьте следующую строку для проверки:

<span class="error" *ngIf="!!searchForm.controls.name.errors.required && (!!searchForm.controls.name.dirty || !!searchForm.controls.name.touched)">
    Name is required.
</span> 
<span class="error" *ngIf="!!searchForm.controls.lastName.errors.required && (!!searchForm.controls.lastName.dirty || !!searchForm.controls.name.touched)">
    lastName is required.
</span>

в вашем ts файле:

submitHandler() {
    if(this.searchForm.valid) {
        // Logic
    }
}

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

person Ayoub k    schedule 24.08.2018

arrow_upward
0
arrow_downward

Вам нужно использовать * ngIf. Обновлен код Stackblitz. https://stackblitz.com/edit/angular-fzyrji

person Suresh Kumar Ariya    schedule 24.08.2018
comment
с ngif это невозможно - person user944513; 24.08.2018
comment
поскольку ngif удаляет и добавляет в dom, я не хочу удалять элемент. только скрыть и показать - person user944513; 24.08.2018
comment
Хорошо Обновлен stackblitz с привязкой [скрытого] атрибута. - person Suresh Kumar Ariya; 24.08.2018

arrow_upward
0
arrow_downward

Попробуйте вот так:

Используйте [hidden] или *ngIf

ДЕМО

<div class="form-group col-sm-4 pl-0 error">
            <label class="field-title mb-5">name<span class="color-red fontWt">&nbsp;*</span></label> {{show}}
            <input type="text" placeholder="Enter name" formControlName="name"> {{searchForm.get('name').invalid}}
            <p class="message" [hidden]="!(show && searchForm.get('name').invalid)">Required</p>
        </div>

        <div class="form-group col-sm-4 pl-0 error">
            <label class="field-title mb-5">last name <span class="color-red fontWt">&nbsp;*</span></label>
            <input type="text" placeholder="Enter last name" formControlName="lastName">
            <p class="message" [hidden]="!(show && searchForm.get('lastName').invalid)">Required</p>
        </div>

        <button (click)="show = true ; submitHandler();">submit</button>
    </section>
</form>
person Akj    schedule 24.08.2018