Modular Form in Angular 4

假設我在我的項目中有一個鏈接，打開一個模態包含註冊表單，並且此表單通過角度驗證，我在我的項目中使用ng-bootstrap庫並在模式中定義了一個指令，然後編寫一個指令對於它，但模態組件將不會被打開，發生錯誤：Modular Form in Angular 4

ERROR Error: No provider for Router! 
    at injectionError (core.es5.js:1169) 
    at noProviderError (core.es5.js:1207) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620) 
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) 
    at resolveNgModuleDep (core.es5.js:9562) 
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10644) 
    at resolveDep (core.es5.js:11147) 
    at createClass (core.es5.js:11011)

app.component.html：

<ng-template #signup let-c="close" let-d="dismiss"> 
     <div class="modal-header"> 
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-6"></div> 
       <div class="col-5 mt-5 mb-2"> 
        <div class="wrapper-left-content"> 
         <app-register-form></app-register-form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </ng-template>

register.compon ent.ts：

import { Component, Injectable, OnInit } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; 
import { Router } from '@angular/router'; 
import { AuthService } from '../services/auth.services'; 
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'app-register-form', 
    templateUrl: '../templates/register.component.html' 
}) 
@Injectable() 
export class RegisterComponent implements OnInit { 
    private errorMessage: any ; 
    closeResult: string; 

    FirstName = new FormControl('', [ 
     Validators.required 
    ]); 
    LastName = new FormControl('', [ 
     Validators.required 
    ]); 

    Password = new FormControl('', [ 
     Validators.required, 
     Validators.minLength(6) 
    ]); 
    Password_Confirm = new FormControl('', [ 
     Validators.required 
    ]);

我該如何解決它？

我調用模式這段代碼：

<div class="user-info"> 
    <div class="user-login-link"> 
     <a href="#" data-toggle="modal" data-target="#signup" (click)="open(signup)"></a> 
    </div> 
    <div class="user-login-link"> 
     <a href="#" data-toggle="modal" data-target="#signin" (click)="open(signin)"></a> 
    </div> 
</div>

來源

2017-06-24 mosi

您是否嘗試使用Angular的'* ngIf'指令顯示/隱藏？ – Abrar

我不認爲這與modals或ng-bootstrap有任何關係。您似乎在某處（某處）使用路由器服務，但未在根NgModule中導入RouterModule。 –

我編輯我的問題 – mosi

No provider for Router意味着你缺少這樣的定義：

//For the app.module.ts 
@NgModule({ 
    imports: [RouterModule.forRoot(...)] 

//For other modules 
@NgModule({ 
    imports: [RouterModule.forChild(...)],

另外，還要確保你正在使用它的最新版本。我的意思是第三方組件。還有其他好的組件，例如https://github.com/valor-software/ngx-bootstrap，你也可以試試。

來源

2017-06-25 13:31:04 VahidN

因爲你的回答是誤導性的，所以我投下了票：問題是關於https://ng-bootstrap.github.io/#/components/modal，它與'ngx-bootstrap'沒有關係 - 它們是2個獨立的項目，並且絕不會重命名！請刪除錯誤的信息信息，我可以刪除向下投票。 –

Modular Form in Angular 4

回答

相關問題