我的表单从不使用反应式表单提交答案

【问题标题】：My form is never submit with a reactive form我的表单从不使用反应式表单提交
【发布时间】：2019-01-16 06:49:32
【问题描述】：

我在提交带有角度的表单时遇到问题。不是我的第一个项目，而是第一次遇到这个问题。

我已经用表单构建器构建了我的表单，我的验证在 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>

【问题讨论】：

尝试在您的form 标签中添加novalidate。
如果您从提交按钮中删除[disabled]="!signupForm.valid" 会发生什么？
我已经测试了这个解决方案，所以要删除所有验证器，但结果是一样的，没有提交:(我的提交按钮是活动的，但是当我点击时没有任何反应。
控制台有错误吗？

标签： angular angular-forms

【解决方案1】：

天哪，感谢 R. Richards，我非常确信我的 html 代码是正确的... 事实上，在我所有的标签错误中，我写的是 signupForm['mycontrol'] 而不是 signupForm.controls['myControl']。

感谢您的指导。

【讨论】：