Angular (ngSubmit) 表单不起作用，我该怎么做？

Question

I tried very hard but it didn't work. I am not getting any error whatsoever. My data is not being saved. But I don't get any errors either. I do not take any action when I press the button. I control everything. I wonder if there is an error in using the ng-model. Backend is also OK. Registration on post

HTML

       <form #myForm="ngForm" class="form-container" (ngSubmit)="onSubmit()" 
             [formGroup]="bookForm">
         <input placeholder="Kategori seç"
          ng-model="categoryBy" type="text" class="form-control form-control-lg">
         <input ng-model="name"  type="text" class="form-control form-control-lg">
         <button type="submit">save</button>
       </form>

TS

onSubmit() {
if (this.bookForm.valid) {
  if (this.type == "add") {
    this.bookService
      .saveBookImage(this.formData)
      .pipe(
        map(result => {
          this.bookForm.controls.picture.setValue(result.url);
        }),
        mergeMap(() => this.bookService.addBook(this.bookForm.value))
      )
      .subscribe(result => {
        this.router.navigateByUrl("/general/blank-page");
      });
  } else {
    if (this.formData == null) {
      this.bookService
        .updateBook(this.book._id, this.bookForm.value)
        .subscribe(result => {
          this.router.navigateByUrl("/general/blank-page");
        });
    } else {
      this.bookService
        .saveBookImage(this.formData)
        .pipe(
          map(result => {
            this.bookForm.controls.picture.setValue(result.url);
          }),
          mergeMap(() =>
            this.bookService.updateBook(this.book._id, this.bookForm.value)
          )
        )
        .subscribe(result => {
          this.router.navigateByUrl("/general/blank-page");
        });
    }
  }
}
}

ngOnInit() {

this.categoryService.getCategories().subscribe(result => {
  this.categories = result;
});
this.bookId = this.route.snapshot.paramMap.get("id");
if (this.bookId == null) {
  this.title = "Kitap Ekleme";
  this.btnText = "Ekle";
  this.type = "add";
} else {
  this.title = "Kitap Güncelleme";
  this.btnText = "Güncelle";
  this.type = "update";

  this.bookService.getBookById(this.bookId).subscribe(result => {
    this.book = result;

    this.bookForm.controls.name.setValue(this.book.name);
    this.bookForm.controls.author.setValue(this.book.author);
    this.bookForm.controls.price.setValue(this.book.price);
    this.bookForm.controls.stock.setValue(this.book.stock);
    this.bookForm.controls.picture.setValue(this.book.picture);
    this.bookForm.controls.categoryBy.setValue(this.book.categoryBy);
  });
}

this.bookForm = new FormGroup({
  name: new FormControl("name", Validators.required),
  categoryBy: new FormControl("", Validators.required)
});

}

Answer 1

You seem to have mixed up AngularJS syntax with Angular 2+ syntax. ng-model was used in AngularJS. You also seem to be using reactive forms, so you should be using formControlName in the first place.

Change your ng-model to formControlName and you should be able to trigger onSubmit .

<form #myForm="ngForm" class="form-container" (ngSubmit)="onSubmit()" [formGroup]="bookForm">
  <input placeholder="Kategori seç" formControlName="categoryBy" type="text" class="form-control form-control-lg">
  <input formControlName="name" type="text" class="form-control form-control-lg">
  <button type="submit">save</button>
</form>

I would also highly recommend going through Reactive Forms and NgForm .

Answer 2

Based on your code, you are using a Template-Driven Form which uses ngModel

Have created a Stackblitz Demo for your reference.

<form #myForm="ngForm"                           // If you are using a template form, no need to implement the reactive form which is [form] or [formGroup]
      class="form-container" 
      (ngSubmit)="onSubmit(myForm.value)">       // Pass your form value, since you've specified #myForm="form" 
                                                 // assigning your form ID with "myForm", use that id as a reference 
                                                 // for your form to fetch it's overall form value          
    
  <input placeholder="Kategori seç"
         name="categoryBy"                       // when using ngModel be sure to add the 'name' property
         [(ngModel)]="categoryBy"                // instead of ng-model, use the two-way data binding [(ngModel)]
         ...>

         ...
</form>