मैं कोणीय के लिए सामग्री संवाद का उपयोग कर रहा हूं, जहां मुझे शीर्षक दर्ज करने और संस्करण को स्वीकृत या अस्वीकार करने की आवश्यकता है।

यहाँ घटक का कोड

  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 बटन पर क्लिक करता हूं तो मुझे सत्यापन करने की आवश्यकता होती है। अब मुझे इनपुट के लिए सत्यापन की आवश्यकता है।

मैं इसे ठीक से कैसे कर सकता हूं?

मदद के लिए धन्यवाद।

1
Eugene Sukh 11 पद 2018, 09:25

3 जवाब

सबसे बढ़िया उत्तर

जब आप प्रपत्र समूह बनाते हैं, तो उन फ़ील्ड में आवश्यक नियम जोड़ें जिनकी आप आवश्यकता चाहते हैं, उदाहरण के लिए यहाँ कारण और स्थिति फ़ील्ड आवश्यक हैं:

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);
    }      
}

आपको अपने एचटीएमएल में सत्यापन त्रुटियों को दिखाने के लिए चटाई-त्रुटि तत्व जोड़ने की आवश्यकता हो सकती है

7
Ahmed Nour Jamal El-Din 11 पद 2018, 09:58
इससे मदद मिलती है। धन्यवाद
 – 
Eugene Sukh
11 पद 2018, 11:32

जब आप फॉर्म बना रहे हों

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);
        }      
    }
1
bhanu 11 पद 2018, 09:41

सबसे पहले पुष्टि करें कि क्या मैंने आपके प्रश्न को सही ढंग से समझा था या नहीं। आपको ओके बटन पर क्लिक करना होगा और अपने फॉर्म के लिए वेरिफिकेशन प्राप्त करना होगा। यदि यह समस्या है तो यहां समाधान है: अपने फॉर्मग्रुप को .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')
}
}

यदि फॉर्मकंट्रोल सत्यापन दोनों सत्य हैं, तो यह फॉर्म। मान्य वापस आ जाएगा। यदि कोई विफल रहता है तो वह झूठी वापसी करेगा।

0
Nirnay Kulshreshtha 11 पद 2018, 09:46