TypeError: Cannot read property 'get' of null - FormControlName
TypeError: Cannot read property 'get' of null - FormControlName
这是我的错误
core.js:6479 ERROR TypeError: Cannot read property 'get' of null
at FormGroupDirective.addControl (forms.js:5346)
at FormControlName._setUpControl (forms.js:5929)
at FormControlName.ngOnChanges (forms.js:5874)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1498)
at callHook (core.js:2536)
at callHooks (core.js:2495)
at executeInitAndCheckHooks (core.js:2446)
at selectIndexInternal (core.js:8447)
at Module.ɵɵadvance (core.js:8430)
at SignInComponent_Template (sign-in.component.html:36)
我不知道为什么以及哪里出错了。
这是我的 HTML 文件
<form (formGroup)="signInForm">
<mat-form-field class="full-width">
<mat-label>Email</mat-label>
<input matInput placeholder="Email" name="email" formControlName="email" [(ngModel)]="email">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Password</mat-label>
<input matInput placeholder="Password" name="password" formControlName="pass" [(ngModel)]="pass">
</mat-form-field>
<button
(click)="signIn()"
mat-raised-button
color="primary"
class="login-button">
Sign In
</button>
</form>
<form [formGroup]="signUpForm">
<mat-form-field class="full-width">
<mat-label>Username</mat-label>
<input matInput placeholder="Full name" name="name" formControlName="name" [(ngModel)]="name">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>E-mail</mat-label>
<input matInput placeholder="Email" name="email" formControlName="email" [(ngModel)]="email">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Contact</mat-label>
<input matInput placeholder="Contact" name="contact" formControlName="contact" [(ngModel)]="contact">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Address</mat-label>
<input matInput placeholder="Address" name="address" formControlName="address" [(ngModel)]="address">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Password</mat-label>
<input matInput placeholder="Password" name="pass" formControlName="pass" [(ngModel)]="pass">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Confirm Password</mat-label>
<input matInput placeholder="Confirm Password" name="conpass" formControlName="conpass" [(ngModel)]="conpass">
</mat-form-field>
<!-- <label class="example-margin">Type of User:</label>
<mat-radio-group>
<mat-radio-button class="example-margin" value="after">Buyer</mat-radio-button>
<mat-radio-button class="example-margin" value="before">Seller</mat-radio-button>
</mat-radio-group> -->
<mat-form-field appearance="fill">
<mat-label>Choose one</mat-label>
<mat-select [formControl]="selected" [errorStateMatcher]="matcher" name="option" id="option">
<mat-option value="none">please select</mat-option>
<mat-option value="valid">Buyer</mat-option>
<mat-option value="invalid">Seller</mat-option>
</mat-select>
</mat-form-field>
<button (click)="signUp()"
mat-raised-button
color="primary"
class="login-button">
Sign Up
</button>
</form>
这是我的 TS 文件
import { NumberInput } from '@angular/cdk/coercion';
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroupDirective, NgForm, FormGroup, FormBuilder } from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
email:String="";
name:String="";
contact:NumberInput="";
address:String="";
pass:String="";
conpass:String="";
constructor( private fb : FormBuilder) { }
signUpForm=this.fb.group ({
name : new FormControl(Validators.required),
email : [null,[Validators.email , Validators.required]],
contact :[null,[Validators.required]],
address : [null,[Validators.required]],
pass : [null,[Validators.required]],
conpass : [null,[Validators.required]]
});
signInForm=this.fb.group({
email : [null,[Validators.email , Validators.required]],
pass : [null,[Validators.required]]
});
selected = new FormControl('valid', [
Validators.required,
Validators.pattern('valid'),
]);
selectFormControl = new FormControl('valid', [
Validators.required,
Validators.pattern('valid'),
]);
nativeSelectFormControl = new FormControl('valid', [
Validators.required,
Validators.pattern('valid'),
]);
matcher = new MyErrorStateMatcher();
// favoriteSeason: string;
// seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
// onLogin(form : NgForm)
// {
// console.log(form.value)
// }
// onSingup(form : NgForm)
// {
// console.log(form.value)
// }
ngOnInit(): void {
}
signUp(){
if(this.signUpForm.valid || (this.signUpForm.controls.pass.value != this.signUpForm.controls.conpass.value))
{
console.log("Invalid Form!")
return;
}
console.log(JSON.stringify(this.signUpForm.value))
}
signIn(){
if(this.signUpForm.valid)
{
console.log("Invalid Form!")
return;
}
console.log(JSON.stringify(this.signUpForm.value))
}
}
我认为首先不提及 ngModel 会是一个问题,但即使在一次又一次地添加相同的错误之后,当我 运行 代码时,我的 GUI 完全被破坏并中断显示上述错误。
请帮我解决这个问题,因为我一直卡在这里。
您的 signInForm 表单组指令应位于方括号中。
(formGroup)="signInForm"
应该是,
[formGroup]="signInForm"
这是我的错误
core.js:6479 ERROR TypeError: Cannot read property 'get' of null
at FormGroupDirective.addControl (forms.js:5346)
at FormControlName._setUpControl (forms.js:5929)
at FormControlName.ngOnChanges (forms.js:5874)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1498)
at callHook (core.js:2536)
at callHooks (core.js:2495)
at executeInitAndCheckHooks (core.js:2446)
at selectIndexInternal (core.js:8447)
at Module.ɵɵadvance (core.js:8430)
at SignInComponent_Template (sign-in.component.html:36)
我不知道为什么以及哪里出错了。
这是我的 HTML 文件
<form (formGroup)="signInForm">
<mat-form-field class="full-width">
<mat-label>Email</mat-label>
<input matInput placeholder="Email" name="email" formControlName="email" [(ngModel)]="email">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Password</mat-label>
<input matInput placeholder="Password" name="password" formControlName="pass" [(ngModel)]="pass">
</mat-form-field>
<button
(click)="signIn()"
mat-raised-button
color="primary"
class="login-button">
Sign In
</button>
</form>
<form [formGroup]="signUpForm">
<mat-form-field class="full-width">
<mat-label>Username</mat-label>
<input matInput placeholder="Full name" name="name" formControlName="name" [(ngModel)]="name">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>E-mail</mat-label>
<input matInput placeholder="Email" name="email" formControlName="email" [(ngModel)]="email">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Contact</mat-label>
<input matInput placeholder="Contact" name="contact" formControlName="contact" [(ngModel)]="contact">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Address</mat-label>
<input matInput placeholder="Address" name="address" formControlName="address" [(ngModel)]="address">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Password</mat-label>
<input matInput placeholder="Password" name="pass" formControlName="pass" [(ngModel)]="pass">
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Confirm Password</mat-label>
<input matInput placeholder="Confirm Password" name="conpass" formControlName="conpass" [(ngModel)]="conpass">
</mat-form-field>
<!-- <label class="example-margin">Type of User:</label>
<mat-radio-group>
<mat-radio-button class="example-margin" value="after">Buyer</mat-radio-button>
<mat-radio-button class="example-margin" value="before">Seller</mat-radio-button>
</mat-radio-group> -->
<mat-form-field appearance="fill">
<mat-label>Choose one</mat-label>
<mat-select [formControl]="selected" [errorStateMatcher]="matcher" name="option" id="option">
<mat-option value="none">please select</mat-option>
<mat-option value="valid">Buyer</mat-option>
<mat-option value="invalid">Seller</mat-option>
</mat-select>
</mat-form-field>
<button (click)="signUp()"
mat-raised-button
color="primary"
class="login-button">
Sign Up
</button>
</form>
这是我的 TS 文件
import { NumberInput } from '@angular/cdk/coercion';
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroupDirective, NgForm, FormGroup, FormBuilder } from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
email:String="";
name:String="";
contact:NumberInput="";
address:String="";
pass:String="";
conpass:String="";
constructor( private fb : FormBuilder) { }
signUpForm=this.fb.group ({
name : new FormControl(Validators.required),
email : [null,[Validators.email , Validators.required]],
contact :[null,[Validators.required]],
address : [null,[Validators.required]],
pass : [null,[Validators.required]],
conpass : [null,[Validators.required]]
});
signInForm=this.fb.group({
email : [null,[Validators.email , Validators.required]],
pass : [null,[Validators.required]]
});
selected = new FormControl('valid', [
Validators.required,
Validators.pattern('valid'),
]);
selectFormControl = new FormControl('valid', [
Validators.required,
Validators.pattern('valid'),
]);
nativeSelectFormControl = new FormControl('valid', [
Validators.required,
Validators.pattern('valid'),
]);
matcher = new MyErrorStateMatcher();
// favoriteSeason: string;
// seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
// onLogin(form : NgForm)
// {
// console.log(form.value)
// }
// onSingup(form : NgForm)
// {
// console.log(form.value)
// }
ngOnInit(): void {
}
signUp(){
if(this.signUpForm.valid || (this.signUpForm.controls.pass.value != this.signUpForm.controls.conpass.value))
{
console.log("Invalid Form!")
return;
}
console.log(JSON.stringify(this.signUpForm.value))
}
signIn(){
if(this.signUpForm.valid)
{
console.log("Invalid Form!")
return;
}
console.log(JSON.stringify(this.signUpForm.value))
}
}
我认为首先不提及 ngModel 会是一个问题,但即使在一次又一次地添加相同的错误之后,当我 运行 代码时,我的 GUI 完全被破坏并中断显示上述错误。 请帮我解决这个问题,因为我一直卡在这里。
您的 signInForm 表单组指令应位于方括号中。
(formGroup)="signInForm"
应该是,
[formGroup]="signInForm"