Поле mat-form-field в Angular 8 реактивных формах показывает недействительным и затронутым даже после успешной отправки формы - PullRequest
Новая
       20

Поле mat-form-field в Angular 8 реактивных формах показывает недействительным и затронутым даже после успешной отправки формы

0 голосов
/ 25 апреля 2020

enter image description here Я использую реактивную форму в моем Angular 8 проекте

, где я использую Angular Дата материала Сборщик и раскрывающийся список материалов

После того, как я отправил форму mat-form-field становится красным и отображается как тронутый и недействительный

Я делюсь своим кодом

Пример кода Форма реактивной формы Файл TS 

  this.ExceptionDetails = this.fb.group({
      Reason: ['' , Validators.required],
      from: ['' , Validators.required],
      to : ['' , Validators.required]
    })

submit() {
  this.ExceptionDetails.markAllAsTouched();

 let body = {
          Reason : this.ExceptionDetails.get('Reason').value,
          to : this.ExceptionDetails.get('to').value, 
          from : this.ExceptionDetails.get('from').value
        }
      this.rest.updateRaisedException(this.id, this.token, this.role, body).subscribe(result => {
        console.log(result)
        if (result['messagecode'] == 200) {
          this.rest.snakbar(result['message']);
          this.ExceptionDetails.get('ExcAmount').untouched;
         }
      })
    }
  }

}

  }

Образец HTML Код 

 <form [formGroup]='ExceptionDetails' (ngSubmit)='submit()' *ngIf='flag' >
    <mat-form-field style="width: 100%" >
                <mat-label>Choose an option</mat-label>
   [enter image description here][1]               <select matNativeControl formControlName='Reason'>
                    <optgroup label="Leave">
                      <option value="Exception on Leave">Exception on Leave</option>

                    </optgroup>
                    <optgroup label="Performance Reward">
                      <option value="Double Beat Working">Double Beat Working</option>
                      <option value="Working on Weekly-Off/Holiday">Working on Weekly-Off/Holiday</option>
                    </optgroup>
                  </select>
            </mat-form-field>


          <div class="form-group row">
            <label  class="col-sm-6 col-form-label">Choose Date:</label>
            <div class="col-sm-6">

              <mat-form-field>
                <mat-label>From</mat-label>
                <input matInput readonly  [matDatepicker]="picker2"  
                formControlName='from' (dateChange)="startDateChange($event)"> 
                <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                <mat-datepicker #picker2></mat-datepicker>
              </mat-form-field>

              <br>


              <mat-form-field  (click)="(!ExceptionDetails.get('from').value) ? openDialogue('Choose From Date') : null">
                <mat-label>To</mat-label>
                <input matInput readonly  [min]="toMinDate"  [matDatepicker]="picker1"  [disabled]="!ExceptionDetails.get('from').value"  formControlName='to'>
                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker  #picker1></mat-datepicker>
              </mat-form-field>

            </div>
          </div>

Отправить

...