Question

我在项目根目录“ project / src / app / Component”内创建了一个.ts文件“ accounts.component.ts”，其代码如下：

    import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-accounts',
    templateUrl: '../src/app/UI/accounts.component.html',
    styles: ['p {font-family: Lato;} ']
})
export class AccountsComponent {
    userForm: any;

    constructor(private formBuilder: FormBuilder) {
        this.CreateForm();
    }
    CreateForm() {
        this.userForm = this.formBuilder.group({
            'name': ['', Validators.required],
            'email': ['', [Validators.required]],
            'password': ['', [Validators.required]],
            'confirmPassword': ['', [Validators.required]],
        }, {
            saveUser(): void {
                if (this.userForm.dirty && this.userForm.valid) {
                    //alert(`name' : ${this.userForm.value.name}  'email' : ${this.userForm.value.email}`);            
                    //alert("test");            
                }
            } });
    }
}

“ templateUrl”值对应具有以下示例代码的html文件：



        <div class="container">  
        <h2>Employee Registration</h2>  
        <form class="form-horizontal" [formGroup]="userForm" (submit)="saveUser()">
            <div class="form-group">  
                <label class="control-label col-sm-2" for="name">Name:</label>  
                <div class="col-sm-10">  
                    <input class="form-control" formControlName="name" id="name" />  
                </div>  
            </div>  
            <div class="form-group">  
                <div class="col-sm-offset-2 col-sm-10">  
                    <button type="submit" [disabled]="!userForm.valid" class="btn btn-success">Submit</button>  
                </div>  
            </div>  
        </form>  
    </div>

我在“ app.module.ts”中注册了“ AccountsComponent”，如下所示：

        <div class="container">  
        <h2>Employee Registration</h2>  
        <form class="form-horizontal" [formGroup]="userForm" (submit)="saveUser()">
            <div class="form-group">  
                <label class="control-label col-sm-2" for="name">Name:</label>  
                <div class="col-sm-10">  
                    <input class="form-control" formControlName="name" id="name" />  
                </div>  
            </div>  
            <div class="form-group">  
                <div class="col-sm-offset-2 col-sm-10">  
                    <button type="submit" [disabled]="!userForm.valid" class="btn btn-success">Submit</button>  
                </div>  
            </div>  
        </form>  
    </div>

在名为Create.cshtml的.cshtml视图中，我仅包含以下标记，该标记对应于account.component.ts中分配的选择器值：

    import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  

import { AppComponent } from './app.component';

import { AccountsComponent } from './Component/accounts.component'; 

@NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent, AccountsComponent ],
    bootstrap: [AppComponent, AccountsComponent ]
})
export class AppModule { }

当我浏览Create.cshtml时，在accounts.component.ts和关联的accounts.component.html中创建的表单没有出现在视图中，只有



        <app-accounts>Loading...</app-accounts>

包含文本作为Loading...。出现在所附的屏幕快照HTML-not-displayed.PNG中，

如何使accounts.component.html表单显示在视图中，出了什么问题，导致accounts.component.html无法显示在Create.cshtml视图中，

请告知！

MVC视图不显示Angular的反应形式的html页面？

0 个答案: