عرض رسالة النجاح

0

لدي نموذج ، وأريد عرض رسالة نجاح بعد أن ينقر المستخدم على إرسال

هنا ما لدي.

 <form [formGroup]="angForm" novalidate>
            <div class="form-group">
              <label class="col-md-4">Comment author</label>
              <input type="text" class="form-control" name="author" formControlName="author" #author />
            </div>
            <div *ngIf="angForm.controls['author'].invalid && (angForm.controls['author'].dirty || angForm.controls['author'].touched)"
              class="alert alert-danger">
              <div *ngIf="angForm.controls['author'].errors.required">
                Name is required.
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-4">comment description</label>
              <input type="text" class="form-control" formControlName="description" #description/>
            </div>
            <div *ngIf="angForm.controls['description'].invalid && (angForm.controls['description'].dirty || angForm.controls['description'].touched)"
              class="alert alert-danger">
              <div *ngIf="angForm.controls['description'].errors.required">
                description is required.
              </div>
            </div>
            <div class="form-group">
              <button (click)="addReview(author.value, description.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
            </div>
          </form>

هنا هو element.ts

import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.scss']
})
export class MovieComponent implements OnInit {
  movie: object;
  review: {};
  addreview: {};
  addreviews: any[];
  angForm: FormGroup;
  // tslint:disable-next-line:max-line-length
  constructor(private _flashMessagesService: FlashMessagesService, private fb: FormBuilder, private route: Router, private http: HttpClient, private activeRouter: ActivatedRoute, private moviesService: MoviesService) {
    this.movie = [];
    this.review = [];
    this.addreviews = [];
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      author: ['', Validators.required],
      description: ['', Validators.required]
    });
  }
  addReview(author, description) {
    this.moviesService.addReview(author, description);
    this._flashMessagesService.show('Your comment was successfully added');
  }
  ngOnInit() {

  }
}

عندما ينقر المستخدم فوق زر إرسال كل شيء يعمل بشكل جيد ، يتم إرسال البيانات وحفظها في قاعدة البيانات ولكن لا يتم عرض رسالة فلاش ، على سبيل المثال تمت إضافة تعليقك بنجاح "ما الذي أحتاج إلى تغييره لعرض رسالة النجاح؟

2 الاجابة

0

هل رأيت أي خطأ في وحدة التحكم في نافذة المتصفح.

تأكد من أنه يجب عليك الإضافة FlashMessagesModule في ملف app.module.ts

import { FlashMessagesModule } from 'angular2-flash-messages';

@NgModule({
    imports: [        
        FlashMessagesModule.forRoot(),
    ]
})

أضف هذه العلامة في ملف مكون التطبيق الخاص بك

<flash-messages></flash-messages>

لمزيد من التفاصيل قم بزيارة الموقع الرسمي. https://www.npmjs.com/package/angular2-flash-messages

آمل أن تكون مفيدة.

:مؤلف
0

وفقًا لرمزك ، أعتقد أنك فاتتك تضمين حاوية لرسائل الفلاش لعرضها في html. أضف هذا في html الخاص بك أينما تريد أن تظهر رسالة فلاش.

    <flash-messages></flash-messages>
:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام