Angular 4 - Реактивные формы - Размытие одного поля выделяет все поля красным - PullRequest
Новая
       37

Angular 4 - Реактивные формы - Размытие одного поля выделяет все поля красным

0 голосов
/ 23 января 2020

Для контекста, это моя форма: 

this.commentForm = this.fb.group(
    {
        commentId: [''],
        commentType: ['', ExistsWithinList(this.commentTypes)],
        commodity: ['', ExistsWithinList(this.commodities)],
        title: ['', Validators.required],
        description: ['', Validators.required],
        dealerId: ['', Validators.required],
        operator: ['', Validators.required]
    },
    {
        updateOn: 'submit'
    }
);

Шаблон: 

<form [formGroup]="commentForm" (ngSubmit)="submitForm()">
    <div class="row">
        <div class="col-lg-6">
            <label for="title">Title</label>
            <input type="text" id="title" class="form-control" formControlName="title" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-3">
            <label for="commentType">Issue Type</label>
            <select class="form-control" id="commentType" formControlName="commentType">
                <option value="">--Select Type--</option>
                <option *ngFor="let commentType of commentTypes">{{ commentType }}</option>
            </select>
        </div>
        <div class="col-sm-3">
            <label for="commodity">Commodity</label>
            <select class="form-control" id="commodity" formControlName="commodity">
                <option value="">--Select Commodity--</option>
                <option *ngFor="let commodity of commodities">{{ commodity }}</option>
            </select>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-12">
            <label for="description">Description</label>
            <textarea rows="10" class="form-control" formControlName="description" id="description">
            </textarea>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-2">
            <span *ngIf="dealerCommentCreation; else updateSubmitButtonBlock">
                <input type="submit" class="btn btn-primary" value="Report" />
            </span>
            <ng-template #updateSubmitButtonBlock>
                <input type="submit" class="btn btn-primary" value="Update" />
            </ng-template>
        </div>
    </div>
</form>

Когда я фокусируюсь на любом из этих полей, а затем размываю поле, все поля с «Validators.required» выделяются красным (хотя в прошлом с более новые версии Angular, только одно поле выделяется красным)

К сожалению, я не могу отобразить фактическую страницу (из-за NDA).

Фрагмент соответствующих Angular зависимостей (в пакете. json): 

  "@angular/common": "4.4.6",
  "@angular/compiler": "4.4.6",
  "@angular/core": "4.4.6",
  "@angular/forms": "4.4.6",
  "@angular/http": "4.4.6",
  "@angular/platform-browser": "4.4.6",
  "@angular/platform-browser-dynamic": "4.4.6",
  "@angular/router": "4.4.6",

1 Ответ

0 голосов
/ 13 февраля 2020

ОБНОВЛЕНИЕ - Итак, после дальнейшего изучения я понял, что реактивные формы Angular 4 еще не поддерживали свойство 'updateOn' (Это была функция, которая стала доступна с Angular 5 +)

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

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

...