I can´t post data using an api in Angular 10

Question

I had this form with a validation that was working fine, the next step was using the post action of an api, but the tutorials I´ve seen have small differences and none seems to work, so ¿how can I use the post action passing first for the validation?

The comentented code is what I´ve tried.

ingresarservicio.component.html

    <form (ngSubmit)="onSubmit()" [formGroup]="form">
         <!--form (ngSubmit)="onSubmit(form)"  [formGroup]="yForm" -->
            <div class="form-group">
                <label for="tecnico">Técnico</label>
                <input type="text" class="form-control" id="tecnico" name="tecnico" formControlName="tecnico" [(ngModel)]="servicioSettings.tecnico">
            </div>
            
            <div class="form-group">
                <label for="servicio">Servicio</label>
                <input type="text" class="form-control" id="servicio" formControlName="servicio" [(ngModel)]="servicioSettings.servicio">
            </div>
    
            <div class="form-group">
                <label for="semanaDelAno">Semana del año</label>
                <input type="number" class="form-control" id="semanaDelAno" formControlName="semanaDelAno" [(ngModel)]="servicioSettings.semanaDelAno">
            </div>
    
            <div class="form-group">
                <label for="diaDeLaSemana">Día de la semana</label>
                <input type="text" class="form-control" id="diaDeLaSemana" formControlName="diaDeLaSemana" [(ngModel)]="servicioSettings.diaDeLaSemana">
            </div>        
    
            <div class="form-group">
                <label for="horaInicial">Hora Inicial</label>
                <input type="number" class="form-control" id="horaInicial" formControlName="horaInicial" [(ngModel)]="servicioSettings.horaInicial">
            </div>
    
            <div class="form-group">
                <label for="horaFinal">Hora Final</label>
                <input type="number" class="form-control" id="horaFinal" formControlName="horaFinal" [(ngModel)]="servicioSettings.horaFinal">
            </div>        
            
            <button type="submit" class="btn btn-primary" [disabled]="myForm.invalid">Enviar</button>
        </form>

ingresarservicio.component.ts

    export class IngresarsrevicioComponent implements OnInit {
    
      servicioSettings: ServicioSettings = {
        tecnico: null,
        servicio: null,
        semanaDelAno: null,
        diaDeLaSemana: null,    
        horaInicial: null,
        horaFinal: null
      };
    
      myForm: FormGroup;
      //dataService: DataService;
    
       constructor(private formBuilder: FormBuilder, private dataService: DataService)  {     
          this.myForm = this.formBuilder.group({
          //this.form = this.formBuilder.group({
            tecnico: ['', Validators.required],
            servicio: ['', Validators.required],
            semanaDelAno: ['', Validators.required],
            diaDeLaSemana: ['', Validators.required],        
            horaInicial: ['', Validators.required],
            horaFinal: ['', Validators.required]
          });
    
          // form = new FormGroup ({
          //   tecnico: new FormControl('', Validators.required)
          // });
       }
    
      ngOnInit(): void {
      }
    
      onSubmit(form: NgForm) {
        console.log('in onSubmit ', form.valid)    
        this.dataService.postServicioSettingsForm(this.servicioSettings).subscribe(
          result => console.log('success ', result),
          error => console.log('error ', error)
        );
      }
    
      // submit() {
      //   if (this.myForm.valid) {
      //     console.log(this.myForm.value)
      //   }
      //   else{
      //     alert("FILL ALL FIELDS")
      //   }
      // }
    
    }

data.service.ts

    constructor(private http: HttpClient) { }
    
      postServicioSettingsForm(servicioSettings: ServicioSettings): Observable<any> {
        return this.http.post('https://localhost:44309/api/Servicio/PostServicio', servicioSettings);
    }

I have the api in my localhost

Answer 1

i suppose formGroup Property in html file is different with in ts file. i cant dedicate use case of servicioSettings and ngModels , if you want set default value to form set in constractor or you can use patchValue.

this.myForm.patchValue(servicioSettings);

<form (ngSubmit)="onSubmit()" [formGroup]="myForm">
        <div class="form-group">
            <label for="tecnico">Técnico</label>
            <input type="text" class="form-control" id="tecnico" formControlName="tecnico">
        </div>
        
        <div class="form-group">
            <label for="servicio">Servicio</label>
            <input type="text" class="form-control" id="servicio" formControlName="servicio" >
        </div>

        <div class="form-group">
            <label for="semanaDelAno">Semana del año</label>
            <input type="number" class="form-control" id="semanaDelAno" formControlName="semanaDelAno">
        </div>

        <div class="form-group">
            <label for="diaDeLaSemana">Día de la semana</label>
            <input type="text" class="form-control" id="diaDeLaSemana" formControlName="diaDeLaSemana">
        </div>        

        <div class="form-group">
            <label for="horaInicial">Hora Inicial</label>
            <input type="number" class="form-control" id="horaInicial" formControlName="horaInicial">
        </div>

        <div class="form-group">
            <label for="horaFinal">Hora Final</label>
            <input type="number" class="form-control" id="horaFinal" formControlName="horaFinal">
        </div>        
        
        <button type="submit" class="btn btn-primary" [disabled]="myForm.invalid">Enviar</button>
    </form>

export class IngresarsrevicioComponent implements OnInit {

  servicioSettings: ServicioSettings = {
    tecnico: null,
    servicio: null,
    semanaDelAno: null,
    diaDeLaSemana: null,    
    horaInicial: null,
    horaFinal: null
  };

  myForm: FormGroup;

   constructor(private formBuilder: FormBuilder, private dataService: DataService)  {     
      this.myForm = this.formBuilder.group({
        tecnico: [servicioSettings.tecnico, Validators.required],
        servicio: [servicioSettings.servicio, Validators.required],
        semanaDelAno: [servicioSettings.semanaDelAno, Validators.required],
        diaDeLaSemana: [servicioSettings.diaDeLaSemana, Validators.required],        
        horaInicial: [servicioSettings.horaInicial, Validators.required],
        horaFinal: [servicioSettings.horaFinal, Validators.required]
      });
   }

  ngOnInit(): void {
  }

  onSubmit() {
    if (this.myForm.valid) {
        this.dataService.postServicioSettingsForm(this.myForm.value).subscribe(
            result => console.log('success ', result),
            error => console.log('error ', error)
        );
    }
  }
}

Answer 2

Please replace [formGroup]="form" with [formGroup]="myForm".