Проверить форму в диалоговом окне Angular

Question

Я использую диалоги материала для Angular, где мне нужно ввести заголовок и выбрать вариант подтверждения или отклонения.

Здесь код компонента

  import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {FormBuilder, Validators, FormGroup} from "@angular/forms";
import { Payment } from '../payments/payment';


@Component({
    selector: 'editing-dialog',
    templateUrl: './editing-dialog.component.html',
    styleUrls: ['./editing-dialog.component.scss']
})
export class EditingDialogComponent implements OnInit {
    form: FormGroup;
    reason:String;
    id: Number;
    statusdescription: String;

    constructor(
        fb: FormBuilder,
        private dialogRef: MatDialogRef<EditingDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data:Payment) {
            this.reason = data.Reason;
            this.id  = data.Id;
            this.statusdescription = data.StatusDescription;
            this.form = fb.group({
                reason: [this.reason, Validators.maxLength(5)],
                id: this.id,
                status: status
            });
    }

    ngOnInit() {

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

    close() {
        this.dialogRef.close();
    }
}

И вот HTML-код этогокомпонент

<h2>{{description}}</h2>

<mat-dialog-content [formGroup]="form">

    <mat-form-field>

        <input matInput required placeholder="Payment Reason" formControlName="reason" value="{{reason}}">


    </mat-form-field>
    <mat-radio-group formControlName="status">
        <mat-radio-button  value="Approved">Approved</mat-radio-button>
        <mat-radio-button value="Rejected">Rejected</mat-radio-button>
      </mat-radio-group>
</mat-dialog-content>

<mat-dialog-actions>

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



    <button class="mat-raised-button"
            (click)="close()">
        Close
    </button>

</mat-dialog-actions>

Мне нужно выполнить проверку, если ввод заполнен и если при нажатии кнопки ok выбрана одна из переключателей.Теперь мне требуется подтверждение для ввода.

Как я могу сделать это правильно?

Спасибо за помощь.

Answer 1

Прежде всего подтвердите, правильно ли я понял ваш вопрос или нет.Вы должны нажать кнопку ОК и получить подтверждение для вашей формы.Если это проблема, то вот решение: Определите вашу группу форм как .ts:

this.form = fb.group({
                reason: [this.reason,  Validators.compose([Validators.required, Validators.maxLength(5)])],
                id: this.id,
                status: status
            });

Определите значение статуса по умолчанию, так как я не вижу его определения в фрагменте кода выше.

Теперь вызывайте функцию по нажатию кнопки ОК

clickOK(): void {
if (this.form.valid) {
    console.log('form is valid')
} else {
    console.log('form is invalid')
}
}

this.form.valid вернет true, если обе проверки formcontrol верны.Если какой-либо из них потерпит неудачу, он вернет false.

Answer 2

при создании группы форм добавьте обязательное правило в поля, которые вы хотите заполнить, например, здесь обязательны поля причины и состояния:

this.form = fb.group({
                    reason: [this.reason, [Validators.required, Validators.maxLength(5)]],
                    id: this.id,
                    status: [status, [Validators.required]]
                });

, затем в методе сохранения:

save() {
    const {value, valid} = this.form;
    if(valid){
        this.dialogRef.close(value);
    }      
}

вам может понадобиться добавить элемент mat-error, чтобы показать ошибки проверки в вашем html

Answer 3

Пока вы строите форму

this.form = fb.group({
                reason: [this.reason, [Validators.required, Validators.maxLength(5)]],
                id: this.id,
                status: status
            });

и при сохранении

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