Блог

 newContact(){

        this.contactservices.submitContact(this.postContact).subscribe(
            result => this.router.navigate(["/home"]),
            error => console.error(error)

        )

    }
    
    
 
    
      

 headers = new HttpHeaders({
        "Content-Type": "application/json",
        Authorization: "Token 5a72afc446dd4c38e5"
    });

    constructor(private http: HttpClient) { }


    submitContact(opost: ContactData){
        return this.http.post(this.url, opost, {headers: this.headers})
}  

  <StackLayout >
        <TextField  hint="Your First Name" [(ngModel)]="postContact.first_name" #element></TextField>
        <TextField hint="Your Last Name" [(ngModel)]="postContact.last_name" #element></TextField>
        <TextField hint="Your Email" [(ngModel)]="postContact.email" #element></TextField>
        <TextView hint="Type your message here" [(ngModel)]="postContact.message" #element></TextView>
    </StackLayout>

<FlexboxLayout class="about-button" alignItems="center">
  <Button class="btnBack" text="Back"></Button>
  <Button class="btnSend" text ="Send" (tap)="newContact()"></Button>
</FlexboxLayout>  

 </StackLayout>
    <StackLayout >
        <TextField hint = "Your First Name" returnKeyType="next"  required ngModel #fname ="ngModel"></TextField>
        <label
        *ngIf ="!fname.valid amp;amp; fname.touched"
        text ="Please enter a valid first name"></label>

        <TextField hint="Your Last Name" required ngModel #lname ="ngModel"></TextField>
        <label
        *ngIf ="!lname.valid amp;amp; lname.touched"
        text ="Please enter a valid last name"></label>

        <TextField hint="Your Email"  keyboardType="email"  required ngModel #email="ngModel"></TextField>
        <label
        *ngIf ="!email.valid amp;amp; email.touched"
        text ="Please enter a valid email address"></label>

        <TextView hint="Type your message here"  returnKeyType="done" required ngModel #message="ngModel"></TextView>
        <label *ngIf ="!message.valid amp;amp; message.touched"
        text ="Please enter a valid message"></label>

    </StackLayout>




<FlexboxLayout class="about-button" alignItems="center">
  <Button class="btnBack" text="Back"></Button>
  <Button class="btnSend" text ="Send" [isEnabled] ="fname.valid amp;amp; lname.valid amp;amp; email.valid amp;amp; message.valid" (tap)="newContact(fname.value, lname.value, email.value,message.value)"></Button>
</FlexboxLayout>  

 services.ts
 submitContact(first_name: string, last_name: string, email: string, message: string){
        const body = JSON.stringify({first_name, last_name, email, message});

        return this.http.post<ContactData>(this.url, body, {headers: this.headers});
}  

 .ts

newContact(firstName: string, lastName: string, email: string, message: string){
        this.contactservices.submitContact(firstName, lastName,
            email, message).subscribe(
            (_result) => this.router.navigate(["/home"]),
            (error) => console.log(error)
            );

    }