无法绑定到' ngFormModel'因为它不是“形式”的已知属性。

时间:2017-05-21 13:36:44

标签: angular typescript visual-studio-2015 code-snippets

我尝试在我的html文件中使用[ngModel]。虽然我在app.module.ts中导入FormsModule,但它给出了错误

  

预期的意外令牌属性名称

我使用带有Resharper的Visual Studio 2015 Enterprise。为Resharper安装了AngularJs扩展。我无法理解为什么它没有看到ng attributes

enter image description here

API-example.component.html

<form [ngFormModel]="searchForm">

    <label for="search" > Search on Youtube</label><br />
    <input ngControl="search" id="search" />'+

</form>

<!--<div *ngFor="#result of results$">
    <a href="#" target="_blank">
    <h3>{{result.snippet.title}}</h3></a>
</div>-->

API-example.component.ts

import { Component } from '@angular/core';
import {Observable} from 'rxjs/RX';
import 'rxjs/Rx';

import {FormsModule, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import {Http} from '@angular/http';

@Component({
    selector: 'api-app',
    templateUrl: './app/rx/api-example.component.html'
})

export class RxApiExampleComponent {
    searchForm: any
    results$: Observable<any>

    constructor(private _formBuilder: FormBuilder, private http: Http) {
        const API_URL = ''
        const API_KEY = ''

        this.searchForm = this._formBuilder.group({
            'search': ['',Validators.required]
        })

        this.results$ = this.searchForm.controls.valueChanges
        .subscribe(value=>console.log(value))
    }
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { RxExampleComponent } from './rx/rx-example1.component'
import { RxApiExampleComponent } from './rx/api-example.component'
import {NavBarComponent} from './nav/navbar.component'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

感谢。

0 个答案:

没有答案