Пользовательская проверка ясности для конкретного поля - PullRequest
Новая
       12

Пользовательская проверка ясности для конкретного поля

0 голосов
/ 22 апреля 2019

Есть ли способ проверки частичной формы на основе требования?

Сборка с: Angular 7, Clarity

На самом деле, у меня одна форма clrForm с некоторыми полями и двумя кнопками.Поля имеют вид:

  • Поле 1: имя
  • Поле 2: URL
  • Поле 3: Дата

Кнопки имеют вид:

  • Кнопка 1: подтвердить
  • Кнопка 2: отправить

Случай 1: При нажатии на кнопку Submit,подтвердите полную форму.И все работает нормально.

Случай 2: При нажатии на Verify.проверить только поля 1 и 2. Я не знаю, как это сделать?

Пожалуйста, помогите, как это сделать ... Пример кода взят со страницы Ясность формы .

Спасибо

ОБНОВЛЕНИЕ :

Форма HTML 

<form class="clr-form clr-form-compact" clrForm #submitData="ngForm" (ngSubmit)="submitProfileData(submitData)">
    <clr-input-container >
        <label for="forname" class="clr-control-label required">Name</label>
        <input clrInput type="text" class="clr-input" [(ngModel)]="formData.name" name="lblName" #lblName="ngModel" id="forname" maxlength="50" placeholder="Name" required>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'required'">Name is required.</clr-control-error>
    </clr-input-container>

    <clr-input-container >
        <label for="url" class="clr-control-label clr-col-12 clr-col-md-4 required">URL</label>
        <input clrInput type="text" class="clr-input" [(ngModel)]="formData.url" name="lblUrl" #lblUrl="ngModel" id="url" placeholder="URL" [pattern]="SOME_URL_PATTERN" required>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'required'">URL is reqyured.</clr-control-error>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'pattern'" >Invalid URL given.</clr-control-error>
    </clr-input-container>

    <div class="clr-col-lg-12 clr-col-md-12 clr-col-12 text-right py-1 pr-0">
        <div class="btn btn-primary" (click)="verifyTenantData()">Verify</div><!-- HERE I DON'T KNOW HOW TO VALIDATE PARTIAL FORM-->
    </div>

    <clr-date-container>
        <label for="startdate" class="clr-control-label clr-col-12 required">Date</label>
        <input type="date" id="startdate" [(ngModel)]="formData.startDate" name="lblStartDt" #lblStartDt="ngModel" placeholder="Date" [(clrDate)]="formData.isoStartDate" required>
        <clr-control-error class="clr-col-12 clr-col-md-8" *clrIfError="'required'">Date is require</clr-control-error>
    </clr-date-container>
<form>
<div class="clr-row ">
    <div class="clr-col-lg-12 text-center my-2">
        <button type="button" class="btn btn-primary" (click)="submitData.ngSubmit.emit()">Submit</button>
    </div>
</div>

Компонент 

submitData(submitData) {
    if (submitData.valid) {
       //SUBMIT DATA CODE
    } else {
        this.clrForm.markAsDirty();
    }
}

1 Ответ

0 голосов
/ 22 апреля 2019

Ясность зависит от проверки формы Angular (работает с реактивным и управляемым шаблоном), чтобы определить, когда элемент управления недействителен.Это делается путем проверки NgControl и проверки наличия ошибки.Похоже, у вас есть два вопроса.

  1. Как заставить ошибки проверки при отправке / проверке?
  2. Как создать пользовательское правило проверки?

По первому вопросу, Clarity проверяет элементы управления только после их касания, чтобы избежать преждевременного отображения ошибок.Если вы хотите форсировать проверку, вы должны использовать API ClrForm.markAsDirty() (до 2.0) или ClrForm.markAsTouched() (2.0+).По сути, это приведет к немедленной проверке всех элементов управления формы и отображению любых ошибок.

В шаблонно-управляемых формах вам необходимо получить ссылку на форму в вашем контроллере. 

@ViewChild(ClrForm) form: ClrForm;

Затем выможете вызвать метод в вашем обработчике кнопки проверки.Не отправляйте форму. 

validate() {
  this.form.markAsDirty(); // 1.0
  //this.form.markAsTouched(); // 2.0+
}

По второму вопросу Документация по проверке угловых форм хорошо ее освещает, и я также предлагаю взглянуть на этот пример из моей книги директива валидатора телефонного номера для NgModel, которая зависит от функции валидатора .

Если бы у вас это было в вашем проекте, вы просто добавили бы атрибут phone в свой вводдобавить валидатор, и Angular (и Clarity) будут знать об этом.Затем вы можете написать собственное сообщение об ошибке, например так: 

<clr-control-error *clrIfError="'phone'">Not a valid phone number</clr-control-error>

Если вам нужно общее сообщение об ошибке, не указывайте директиву clrIfError, и она покажет любую ошибку .

Наконец, ваша кнопка отправки может быть просто <button type="submit" class="btn btn-primary">Submit</button> вместо того, чтобы захватить ссылку на форму и вручную вызвать событие отправки.

...