形式 – 角度2：’ngFormModel’,因为它不是已知的本机属性

发布时间：2020-12-17 07:43:20 所属栏目：安全来源：网络整理

导读：我的错误是, EXCEPTION: Error: Uncaught (in promise): Template parse errors: 无法绑定到’ngFormModel’,因为它不是已知的本机属性(“ 我的简历 ] [ngFormModel] =“form”(ngSubmit)=“onSubmit(form.value)” “)：a @ 3：7 没有将“exportAs”设置为

我的错误是,

EXCEPTION: Error: Uncaught (in promise): Template parse errors:

无法绑定到’ngFormModel’,因为它不是已知的本机属性(“

我的简历

] [ngFormModel] =“form”(ngSubmit)=“onSubmit(form.value)”>

“)：a @ 3：7
没有将“exportAs”设置为“ngForm”(“stname”)的指令
]#firstname =“ngForm”>

“)：a @ 9：85
没有指定“exportAs”设置为“ngForm”(“/ label>
]#lastname =“ngForm”>

我的模板,

<h3 class = "head">MY PROFILE</h3>

 <form  [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">

  <div class="row">

  <div class="form-group">     
      <label class="formHeading">firstname</label>
       <input type="text" id="facebook" class="form-control"     ngControl="firstname" #firstname="ngForm" >  
   </div>

      <div *ngIf ="firstname.touched">
     <div *ngIf ="!firstname.valid" class = "alert alert-danger">
       <strong>First name is required</strong>
      </div>  
     </div>


    <div class="form-group">
    <label class="formHeading">lastname</label>
    <input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" #lastname="ngForm" >  
   </div>

      <div *ngIf ="lastname.touched" >
         <div *ngIf = "!lastname.valid" class = "alert alert-danger">
             <strong>Last name is required</strong>
         </div>
       </div>




        <div class="form-group">
       <label class="formHeading">Profilename</label>
        <input type="text" id="facebook" class="form-control col-xs-3" ngControl="profilename" #profilename="ngForm" >  
</div>



       <div class="form-group">
      <label class="formHeading">Phone</label>
       <input type="text" id="facebook" class="form-control col-xs-3" ngControl="phone" #phone="ngForm" >  
   </div>

      <div *ngIf ="phone.touched" >
         <div *ngIf = "!phone.valid" class = "alert alert-danger">
            <strong>Phone number is required</strong>
         </div>
      </div>

     <label class="formHeading">Image</label>
    <input type="file" name="fileupload" ngControl="phone">



  <div class="form-row btn">

    <button type="submit" class="btn btn-primary  "    [disabled]="!form.valid">Save</button>
    </div>

 </div>
 </form>

我的组件,
从“@ angular / core”导入{Component};
从’@ angular / http’导入{Http,Response,Headers};
从“rxjs / Observable”导入{Observable};
从’rxjs / Subject’导入{Subject};
从’../headers/headers’导入{contentHeaders};
从“@ angular / forms”导入{FORM_DIRECTIVES};
从’@ angular / router’导入{Router,ROUTER_DIRECTIVES};
从“@ angular / common”导入{Control,FormBuilder,ControlGroup,Validators};

@Component({

   templateUrl: './components/profile/profile.html',directives: [ROUTER_DIRECTIVES,FORM_DIRECTIVES],})

export class Profile {


    http: Http;

    form: ControlGroup;

     constructor(fbld: FormBuilder,http: Http,public router: Router) {
    this.http = http;
     this.form = fbld .group({
 firstname: ['',Validators.required],lastname: ['',profilename :['',image : [''],phone : [''],});


   }



    onSubmit(form:any){

      console.log(form);
         let body = JSON.stringify(form);
       var headers = new Headers();
      this.http.post('http://localhost/angular/index.php/profile/addprofile',body,{headers:headers})
           .subscribe(
           response => {
              if(response.json().error_code ==0){
            alert('added successfully');
                this.router.navigate(['/demo/professional']);
             }
              else{
               alert('fail');

               }

             })
        }


       }

问题是您仍然从常规导入,特别是使用旧表单的说明.
正确导入新表单的组件：

import {FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
import {FormBuilder,FormGroup,Validators} from '@angular/forms';

并纠正组件：

@Component({
    ...
    directives: [FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES]
})
export class AppComponent {

    form: FormGroup;

    constructor(fbld: FormBuilder) {

        this.form = fbld.group({
            ...

        });


    }

    ...

}

然后更正视图：ngFormModel已被formGroup替换,并为您的字段使用formControl：

<form  [formGroup]="form" (ngSubmit)="onSubmit(form.value)">

    <div class="row">

        <div class="form-group">     
            <label class="formHeading">firstname</label>
            <input type="text" id="facebook" class="form-control" [formControl]="form.controls['firstname']" >  
        </div>

        <div *ngIf ="form.controls['firstname'].touched">
            <div *ngIf ="!form.controls['firstname'].valid" class = "alert alert-danger">
            <strong>First name is required</strong>
            </div>  
        </div>

        ... 

        <div class="form-row btn">

            <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Save</button>

        </div>

    </div>
</form>

编辑.从Angular 2.0.0-rc.5中,需要从组件中删除指令并在AppModule中导入表单模块：

import { FormsModule,ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        ...
        FormsModule,ReactiveFormsModule
    ],...
    bootstrap: [AppComponent]
})

export class AppModule { }

如果您使用共享模块,请不要忘记导出它们：

@NgModule({
    imports: [
        ...
        FormsModule,exports: [
        ...
        FormsModule,ReactiveFormsModule
    ]
})

export class SharedModule { }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!