AngularJS metoda POST przekazująca dane do API C#

Odpowiedz Nowy wątek
2019-08-11 23:19
0

Hej,

Mam do was pytanie, od kilku dni ogarniam angulara, w którym zrobiłem pobieranie poprzez get, danych z webAPI które utworzyłem w C#. Dane pobierają się prawidłowo, wszystko jest cacy. Teraz chciałbym się zabrać na metodę post, stworzyłem w webAPI, odpowiednią funkcję, dodaje się bez problemu poprzez PostMan. Siedzę już kilka godzin, przeczytałem wiele artykułów i obejrzałem wiele tutoriali, ale nie mogę zaimplementować tego do angulara. Czy jest opcja aby dodawać te dane w jakiś inny sposób niż przez webClient i metodę post? Wszystko odbieram i chce zapisywać w JSON.

Jeśli potrzebny będzie kod to oczywiście wkleję, ale najpierw chciałbym wiedzieć czy nie ma jakieś innej metody od POST. Nie jestem jeszcze biegły na tyle w TypeScript. W C# zrobiłem stronę gdzie zaprogramowałem dodawanie rekordów do API i tam wszystko działa mi prawidłowo.

Pozostało 580 znaków

2019-08-12 21:10
0

Najszybciej jednak będzie jak wrzucisz kod :P Pokaż, proszę, zarówno jak robisz GETa jak i POSTa

Pozostało 580 znaków

2019-08-13 09:43
0

Poniżej kod:

GET:

Klasa showVacations:

export class ShowComponent implements OnInit {

  constructor(private httpService: HttpService) { }

  public vacations = [];
  ngOnInit() {
    this.httpService.getVacations()
    .subscribe(vacations => this.vacations = vacations );
  }

}

http.service.ts:


export class HttpService {

    constructor(private http: HttpClient) { }

    getVacations(): Observable<Array<Vacation>> {
        return this.http.get<Array<Vacation>>('https://localhost:44316/api/vacation');
    }

    addVacation(vacation: Vacation): Observable<any> {
        return this.http.post('https://localhost:44316/api/vacation', vacation);
}
}

HTML od GET:

<div id="Vtable"><h1> Vacation List</h1>
<table class="table">
  <tbody>
        <td>   Name  </td>
        <td>  Vacation start  </td>
        <td>  Vacation end  </td>
        <td> Superior  </td>
    <tr *ngFor="let vacation of vacations">
  <td>   {{vacation.userName}}  </td>
  <td>  {{vacation.vacationStart}}  </td>
  <td>  {{vacation.vacationEnd}}  </td>
  <td>  {{vacation.superior}}  </td>
    </tr>
    </tbody>
</table>
</div>

POST:

create.component.ts:

export class CreateComponent implements OnInit {
  constructor(private httpService: HttpService) { }

  vacation: FormGroup;
  objVacation: Vacation;

  ngOnInit() {

  }
  onSubmit() {
    this.mapFormVacation();
    this.httpService.addVacation(this.objVacation)
    .subscribe(
      data => console.log('Success!', data)
    );
  }
    mapFormVacation() {
      this.objVacation.userName = this.vacation.value.userName;
      this.objVacation.vacationStart = this.vacation.value.vacationStart;
      this.objVacation.vacationEnd = this.vacation.value.vacationEnd;
      this.objVacation.superior = this.vacation.value.superior;
    }

}

HTML od POST:

<form #vacationForm="ngForm" (ngSubmit)="onSubmit()" novalidate>
    <h1>New vacation</h1>
    <div class="form-group">
        <div class="col-sm-12">
            <label for="userName">Name</label>
            <input name="userName" 
            type="text" 
            class="form-control" 
            id="userName" 
            placeholder="Name" 
            formControlName="userName"
            [(ngModel)]="userName"          
            >
            <BR>
        </div>
        <div class="col-sm-12">
                <label for="vacationS">Vacation Start</label>
                <input name="vacationStart"
                type="text" 
                class="form-control" 
                id="vacationS" 
                placeholder="Vacation Start" 
                formControlName="vacationStart"
                [(ngModel)]="vacationStart"    
                >
            </div>
            <div class="col-sm-12">
                    <label for="vacationE">Vacation End</label>
                    <input name="vacationEnd"
                    type="text" 
                    class="form-control" 
                    id="vacationE" 
                    placeholder="Vacation End" 
                    formControlName="vacationEnd"
                    [(ngModel)]="vacationEnd"    
                    >
                </div>
                <div class="col-sm-12">
                        <label for="superior">Superior</label>
                        <input name="superior"
                        type="text" 
                        class="form-control" 
                        id="superior" 
                        placeholder="Superior" 
                        formControlName="superior"
                        [(ngModel)]="superior"    
                        >
                    </div>          
    </div>
    <div>
        <button type="submit" class="submitButton">Submit</button>
    </div>
</form>

Service ten sam co w GET.

edytowany 1x, ostatnio: kain555, 2019-08-13 09:44

Pozostało 580 znaków

2019-08-13 12:10
0

I dostaje wtedy:

screenshot-20190813121013.png

na pewno coś robię źle, tylko nie wiem co... Pomożecie?

Pozostało 580 znaków

2019-08-13 12:20
0

Zmyliłeś trochę z tym angularJS w nazwie :P Zdebugguj sobie najpierw funkcję mapFormVacation i zobacz co tam masz za wartości bo tam ewidentnie coś nie gra.
No i dlaczego masz this.vacation.value.userName ? Do wartości kontrolki w formie lepiej się tak odwołać:

this.vacation.get('userName').value
edytowany 2x, ostatnio: Kondziowsky, 2019-08-13 12:21

Pozostało 580 znaków

2019-08-13 12:45
0

Teraz dostaje:

screenshot-20190813124457.png

Czy mam coś źle zdefiniowane w HTML? Że nie czyta wartości z input?

Zapewne jest tam jakiś banał, ale poziom mojego doświadczenia z TypeScript i ogólnie z angularem to zaledwie 5 dni...

edytowany 1x, ostatnio: kain555, 2019-08-13 12:48

Pozostało 580 znaków

2019-08-13 12:57
0

No trochę pomieszałeś w formach - ale nie ma co się dziwić, bo to jest chyba najcięższy temat (jak dla mnie). Pomieszałeś trochę dwa sposoby budowania formów - template driven forms i reactive forms. Jeżeli w html'u użyłeś

#vacationForm="ngForm"

to przekaż sobie go w ten sposób:

(ngSubmit)="onSubmit(vacationForm.value)"

i odbierz po stronie ts:

  onSubmit(form) {
    this.mapFormVacation(form);
    this.httpService.addVacation(this.objVacation)
    .subscribe(
      data => console.log('Success!', data)
    );
  }

zobacz jak wygląda obiekt form i poprzepisuj to w tej funkcji mapFormVacation.

@edit aaa, no i z htmla wywal FormControlName , a w ts vacation: FormGroup; - to jest używane w reactive forms a w tym przypadku łatwiej przerobić to na template driven.

Zajrzyj tutaj, może trochę Ci to objaśni -> http://www.angular.love/2017/[...]ular-2-template-driven-forms/

edytowany 3x, ostatnio: Kondziowsky, 2019-08-13 13:01

Pozostało 580 znaków

2019-08-13 13:13
0
  1. Nic dziwnego, że dostajesz error skoro nie utworzyłeś nigdzie obiektu FormGroup a chcesz z niego wyciągać wartości.
    W twoim wypadku this.vacation === undefined.
  2. Zmiksowałeś dwa rozwiązania to nie zadziała
export class CreateComponent implements OnInit {
  constructor(private httpService: HttpService,  private formBuilder: FormBuilder) { }

  vacation: FormGroup;
  objVacation: Vacation;

  ngOnInit() {
    this.vacation = this.formBuilder.group({
      userName: [''],
      vacationStart:[''],
      vacationEnd:[''],
      superior:['']
    })
  }
  onSubmit() {
    this.mapFormVacation();
    this.httpService.addVacation(this.objVacation)
    .subscribe(
      data => console.log('Success!', data)
    );
  }
    mapFormVacation() {
      this.objVacation.userName = this.vacation.value.userName;
      this.objVacation.vacationStart = this.vacation.value.vacationStart;
      this.objVacation.vacationEnd = this.vacation.value.vacationEnd;
      this.objVacation.superior = this.vacation.value.superior;
    }

}
<form [formGroup]="vacation" (submit)="onSubmit()" novalidate>
    <h1>New vacation</h1>
    <div class="form-group">
        <div class="col-sm-12">
            <label for="userName">Name</label>
            <input name="userName" 
            type="text" 
            class="form-control" 
            id="userName" 
            placeholder="Name" 
            formControlName="userName"         
            >
            <BR>
        </div>
        <div class="col-sm-12">
                <label for="vacationS">Vacation Start</label>
                <input name="vacationStart"
                type="text" 
                class="form-control" 
                id="vacationS" 
                placeholder="Vacation Start" 
                formControlName="vacationStart"
                >
            </div>
            <div class="col-sm-12">
                    <label for="vacationE">Vacation End</label>
                    <input name="vacationEnd"
                    type="text" 
                    class="form-control" 
                    id="vacationE" 
                    placeholder="Vacation End" 
                    formControlName="vacationEnd"
                    >
                </div>
                <div class="col-sm-12">
                        <label for="superior">Superior</label>
                        <input name="superior"
                        type="text" 
                        class="form-control" 
                        id="superior" 
                        placeholder="Superior" 
                        formControlName="superior"
                        >
                    </div>          
    </div>
    <div>
        <button type="submit" class="submitButton">Submit</button>
    </div>
</form>
Pokaż pozostałe 3 komentarze
Ok, do console.log działa, teraz dodałem kod od "onSubmit()" i "mapFormVacation()" który podałeś wcześniej i nadal nic :( - kain555 2019-08-13 13:58
Co to znaczy nic? https://stackblitz.com/edit/angular-qvan62 dodałem parę consol.log'ow abyś obczaił jakie tam są obiekty w środku. - Schadoow 2019-08-13 14:01
Nie no, do logów wszystko ładnie się przekazuje, ale baza danych nadal pusta - kain555 2019-08-13 14:08
No to już nie jest kwestia formularza tylko tego co dodaje do bazy :) - Schadoow 2019-08-13 14:08
sprawdź swoje rest api - Schadoow 2019-08-13 14:10

Pozostało 580 znaków

2019-08-13 13:39
0

Do consoli działa bez zarzutów, potem odkomentowałem fragment kodu który zostawiłeś i:

screenshot-20190813140502.png

edytowany 1x, ostatnio: kain555, 2019-08-13 14:05
łap tutaj -> https://stackblitz.com/edit/a[...]rc%2Fapp%2Fapp.component.html można to zrobić w ten sposób (zobacz konsolę). Tutaj dodałem swoją klasę Vacation w .ts, Ty pewnie ją zaciągasz z pliku (domyślnie u siebie rozumiem masz jakieś inicjujące wartości - u mnie jest to pusty string '') - Kondziowsky 2019-08-13 13:58

Pozostało 580 znaków

2019-08-13 14:07
0

I co xD. To co ci się wyświetla to jest błąd formatowania lini.

Pozostało 580 znaków

2019-08-13 14:17
0

Dobra dzięki, nareszcie inny error :D

screenshot-20190813141728.png

Zaraz spróbuję to sam ogarnąć. Dziękuje bardzo za pomoc!

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0