角度formbuilder找不到formgroup

我想使用formbuilder來減少我的表單組件上的相當多的代碼，但是我無法讓它工作，無論我做什麼，我總是得到'不能讀屬性'無效'未定義'，代碼在下面，我錯過了什麼？角度formbuilder找不到formgroup

component.html

<form [formGroup]="myForm" class="mt-3" (ngSubmit)="onSubmit()" novalidate> 
<fieldset formGroupName="name"> 

    <div class="form-group" [ngClass]="{'has-danger': firstName.invalid && (firstName.dirty || firstName.touched), 'has-success': firstName.valid && (firstName.dirty || firstName.touched)}"> 
     <label>First Name</label> 
     <input type="text" class="form-control" formControlName="firstName"> 
    </div> 

    <div class="form-group" [ngClass]="{'has-danger': lastName.invalid && (lastName.dirty || lastName.touched), 'has-success': lastName.valid && (lastName.dirty || lastName.touched)}"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" formControlName="lastName"> 
    </div> 

</fieldset> 

<div class="form-group" [ngClass]="{'has-danger': email.invalid && (email.dirty || email.touched), 'has-success': email.valid && (email.dirty || email.touched)}"> 
    <label>Email</label> 
    <input type="email" class="form-control" formControlName="email"> 
</div> 


<div class="form-group" [ngClass]="{'has-danger': password.invalid && (password.dirty || password.touched), 'has-success': password.valid && (password.dirty || password.touched)}"> 
    <label>Password</label> 
    <input type="password" class="form-control" formControlName="password"> 
</div> 


<div class="form-group" [ngClass]="{'has-danger': language.invalid && (language.dirty || language.touched), 'has-success': language.valid && (language.dirty || language.touched)}"> 
    <label>Language</label> 
    <select class="form-control" formControlName="language"> 
     <option value="">Please select a language</option> 
     <option *ngFor="let lang of langs" [value]="lang">{{lang}}</option> 
    </select> 
</div> 

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

component.ts

import { Component, OnInit, AfterViewInit, Pipe } from '@angular/core'; 
import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms'; 

export class ModelDrivenFormFormModelValidationComponent implements OnInit { 
    langs: string[] = ['English', 'French', 'German']; 

    myForm: FormGroup; 

    constructor(private fb: FormBuilder) { 
     this.createForm(); 
    } 

    createForm() { 
     this.myForm = this.fb.group({ 
      name: this.fb.group({ 
       firstName: ['', [Validators.required]], 
       lastName: ['', [Validators.required]] 
      }), 
      email: ['', [Validators.required, Validators.pattern('[^ @]*@[^@]*')]], 
      password: ['', [Validators.required, Validators.minLength(8)]], 
      language: '' 
     }); 
    } 

    ngOnInit() {} 
}

來源

2017-09-04 user2983177

嘗試'的firstName .invalid' - ？問號，設置可選的，直到它被定義 – Cristophs0n

謝謝你，我今天早上嘗試過，但它仍然給了我同樣的錯誤，現在晚上10點它的工作 – user2983177

沒有probs - 很高興你得到它排序 – Cristophs0n

分量模板嘗試已被宣佈之前它來訪問變量。使用安全的導航運算符?.以避免這種情況。實施例下面：

<div class="form-group" [ngClass]="{'has-danger': password?.invalid && (password?.dirty || password?.touched), 'has-success': password?.valid && (password?.dirty || password?.touched)}"> 
    <label>Password</label> 
    <input type="password" class="form-control" formControlName="password"> 
</div>

來源

2017-09-04 20:06:50 Faisal

謝謝，但現在我的驗證器不工作，是否有一個問題，我試圖訪問該控件的屬性？ – user2983177

在反應性形式，可以不直接使用例如email提及你形式的控制（在相反的模板驅動形式，其中使用一個模板參考變量）。

您需要參考實際的形式控制在你的模板，因此，例如您的email驗證看起來是這樣的：

[ngClass]="{'has-danger': myForm.controls.email.invalid && ..... }

（它可能在這裏需要航行安全操作過，不知道，你可以附加，如果它拋出一個錯誤）

在這是一個很長的路徑，所以你可以在建立一個表格後，實際上分配這個變量，例如變量email，那麼你可以使用你現在的代碼。

email: FormControl; 

createForm() { 
    this.myForm = this.fb.group({ 
     .... 
    }); 

    this.email = this.myForm.controls.email; 
}

來源

2017-09-05 09:13:40 Alex

謝謝您的幫助 – user2983177

沒問題！祝你有美好的一天，快樂的編碼:) – Alex

角度formbuilder找不到formgroup

回答

相關問題