При подаче делается отлично, даже если ошибки выходят - PullRequest
Новая
       58

При подаче делается отлично, даже если ошибки выходят

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

У меня есть форма с минимумом символов и максимумом, проблема в том, что если минимум 2 символа и я поставил один, я получаю ошибку мат, но при сохранении она позволяет сохранить ее только с одним символом . 

 <mat-form-field>
        <input matInput #input1 maxlength="300" minlength="2"
                placeholder="Nombre"
               formControlName="name">
        <mat-hint align="end">{{input1.value?.length || 0}}/300</mat-hint>
        <mat-error>
           Minimo 2 caracteres máximo 300
        </mat-error>
</mat-form-field>

Кнопка сохранения: 

 <button  class="mat-raised-button mat-primary"  (click)="save()">Save</button>

Функция сохранения: 

    save() {
    this.dialogRef.close(this.form.value);
  }

https://stackblitz.com/edit/angular-jkjrsd-8flxvt

Ответы [ 2 ]

1 голос
/ 13 января 2020

используйте форму отправки 

<form [formGroup]="form" (ngSubmit)="save()" class="example-form">
<mat-form-field>
    <input matInput #input1 maxlength="300" minlength="2"
            placeholder="Nombre"
           formControlName="name">
    <mat-hint align="end">{{input1.value?.length || 0}}/300</mat-hint>
    <mat-error>
        Minimo 2 caracteres máximo 300
    </mat-error>
</mat-form-field>
<button type="submit"> save</button>

In component.ts 

save(){
  if(this.form.valid){
  console.log('saved')
  }
  else{
     console.log('invalid form')
  }
}

пример stackblitz

enter image description here

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

Проверка должна быть в форме контроля. Вы должны удалить из HTML maxlength="300" minlength="2" и установить проверку формы в группе форм, например:

.ts 

formGroup = new FormGroup({
    name: new FormControl('', [Validators.maxLength(300), Validators.minLength(2), Validators.required])
  });

. html

<form (ngSubmit)="onSubmit()" [formGroup]="formGroup">
    <mat-form-field>
        <input matInput #input1 placeholder="Nombre" formControlName="name">
        <mat-hint align="end">{{input1.value?.length || 0}}/300</mat-hint>
        <mat-error>
           Minimo 2 caracteres máximo 300
        </mat-error>
    </mat-form-field>
    <button type="submit" [disabled]="!formGroup.valid">Save</button>
</form>
...