我的表单永远不会以反应形式提交
My form is never submit with a reactive form
我在使用 angular 提交表单时遇到问题。
不是我的第一个项目,但第一次遇到这个问题。
我已经使用 formbuilder 构建了我的表单,我的验证在 html 中没有问题,但是当我点击按钮时,没有任何反应。
我尝试在我的提交函数中放置断点,但我的表单从未使用过它...
我试过 (ngSubmit) 和 (click),但都是一样的。
我的app.module
@NgModule({
declarations: [
AppComponent,
SignUpComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes)
]
我的signup.component.ts
@Component({
selector: 'app-sign-up-in',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit {
signupForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private securityService: SecurityService) { }
ngOnInit() {
this.initForm();
}
initForm() {
this.signupForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
firstname: ['', [Validators.required]],
lastname: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(5)]],
confirmPassword: [''],
}, {validator: PasswordValidator.matchingConfirmPasswords});
}
onSubmit() {
const formValue = this.signupForm.value;
const newCustomer = new Customer(
formValue['email'],
formValue['password'],
formValue['firstname'],
formValue['lastname']
);
this.securityService.registerCustomer(newCustomer);
}
}
还有 html
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email">Adresse Email</label>
<input type="email" class="form-control" id="email" formControlName="email" placeholder="Votre email">
<label class="text-danger" *ngIf="signupForm.controls['email'].invalid && (signupForm.controls['email'].dirty || signupForm['email'].touched)">
Veuillez entrer une adresse email valide
</label>
</div>
<div class="form-group">
<label for="firstname">Prénom</label>
<input type="text" class="form-control" id="firstname" formControlName="firstname" placeholder="Votre prénom">
<label class="text-danger" *ngIf="signupForm.controls['firstname'].invalid && (signupForm.controls['firstname'].dirty || signupForm['firstname'].touched)">
Le prénom est requis
</label>
</div>
<div class="form-group">
<label for="lastname">Nom</label>
<input type="text" class="form-control" id="lastname" formControlName="lastname" placeholder="Votre nom">
<label class="text-danger" *ngIf="signupForm.controls['lastname'].invalid && (signupForm.controls['lastname'].dirty || signupForm['lastname'].touched)">
Le nom est requis
</label>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" class="form-control" id="password" formControlName="password" placeholder="Votre mot de passe">
</div>
<div class="form-group">
<label for="passwordRepeated">Répéter mot de passe</label>
<input type="password" class="form-control" id="passwordRepeated" formControlName="confirmPassword" placeholder="Répétez votre mot de passe">
<label class="text-danger" *ngIf="signupForm.hasError('notEquals') && (signupForm.controls['confirmPassword'].dirty || signupForm['confirmPassword'].touched)">
Le mot de passe de confirmation est différent du premier mot de passe
</label>
</div>
<input type="submit" class="btn btn-primary col-12" [disabled]="!signupForm.valid" value="S'inscrire" />
</form>
哦,天哪,谢谢 R. Richards,我很高兴我的 html 代码是正确的...
事实上,在我所有的标签错误中,我写的是 signupForm['mycontrol'] 而不是 signupForm.controls['myControl'].
谢谢指点
我在使用 angular 提交表单时遇到问题。 不是我的第一个项目,但第一次遇到这个问题。
我已经使用 formbuilder 构建了我的表单,我的验证在 html 中没有问题,但是当我点击按钮时,没有任何反应。
我尝试在我的提交函数中放置断点,但我的表单从未使用过它...
我试过 (ngSubmit) 和 (click),但都是一样的。
我的app.module
@NgModule({
declarations: [
AppComponent,
SignUpComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes)
]
我的signup.component.ts
@Component({
selector: 'app-sign-up-in',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit {
signupForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private securityService: SecurityService) { }
ngOnInit() {
this.initForm();
}
initForm() {
this.signupForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
firstname: ['', [Validators.required]],
lastname: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(5)]],
confirmPassword: [''],
}, {validator: PasswordValidator.matchingConfirmPasswords});
}
onSubmit() {
const formValue = this.signupForm.value;
const newCustomer = new Customer(
formValue['email'],
formValue['password'],
formValue['firstname'],
formValue['lastname']
);
this.securityService.registerCustomer(newCustomer);
}
}
还有 html
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email">Adresse Email</label>
<input type="email" class="form-control" id="email" formControlName="email" placeholder="Votre email">
<label class="text-danger" *ngIf="signupForm.controls['email'].invalid && (signupForm.controls['email'].dirty || signupForm['email'].touched)">
Veuillez entrer une adresse email valide
</label>
</div>
<div class="form-group">
<label for="firstname">Prénom</label>
<input type="text" class="form-control" id="firstname" formControlName="firstname" placeholder="Votre prénom">
<label class="text-danger" *ngIf="signupForm.controls['firstname'].invalid && (signupForm.controls['firstname'].dirty || signupForm['firstname'].touched)">
Le prénom est requis
</label>
</div>
<div class="form-group">
<label for="lastname">Nom</label>
<input type="text" class="form-control" id="lastname" formControlName="lastname" placeholder="Votre nom">
<label class="text-danger" *ngIf="signupForm.controls['lastname'].invalid && (signupForm.controls['lastname'].dirty || signupForm['lastname'].touched)">
Le nom est requis
</label>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" class="form-control" id="password" formControlName="password" placeholder="Votre mot de passe">
</div>
<div class="form-group">
<label for="passwordRepeated">Répéter mot de passe</label>
<input type="password" class="form-control" id="passwordRepeated" formControlName="confirmPassword" placeholder="Répétez votre mot de passe">
<label class="text-danger" *ngIf="signupForm.hasError('notEquals') && (signupForm.controls['confirmPassword'].dirty || signupForm['confirmPassword'].touched)">
Le mot de passe de confirmation est différent du premier mot de passe
</label>
</div>
<input type="submit" class="btn btn-primary col-12" [disabled]="!signupForm.valid" value="S'inscrire" />
</form>
哦,天哪,谢谢 R. Richards,我很高兴我的 html 代码是正确的... 事实上,在我所有的标签错误中,我写的是 signupForm['mycontrol'] 而不是 signupForm.controls['myControl'].
谢谢指点