Question

我想将数据从colors.component.html表单传递到colors.component.ts，但没有给出数据。

有人可以帮助我吗？

colors.component.html

 <form (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="exampleInputEmail1">Nama</label>

    <input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Nama"  required >


  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Nomor Telephone</label>
    <input type="Number" class="form-control" id="number" placeholder="Nomor Telephone"  required>
  </div>
  <div class="form-check">
    <label class="form-check-label">

    </label>
  </div><!-- 
  <button type="submit" class="btn btn-primary">Submit</button>
  <button ng-click="onSubmlit()">OK</button> -->
  <button class="btn btn-primary" (click)="onSubmit()">Submit</button>
</form>
<p></p>
<h3>Phone Book List</h3>
<p>

<li *ngFor="let index of  data ">
   Name : {{ index.name }} - Number : {{ index.number }} 
  </li>
</p>
`

colors.component.ts

import { Component, OnInit } from '@angular/core';
import { getStyle, rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
import { HttpClient } from '@angular/common/http';
import {NgForm} from '@angular/forms';
import { OrderPipe } from 'ngx-order-pipe';
import { Contacts } from './contacts';
@Component({
  templateUrl: 'colors.component.html'
})

export class ColorsComponent implements OnInit {


    data: any=[];
  public onSubmit():void{
 this.http.post('http://localhost:8080/api/contacts/', {
      name: "",
      number: "",

    }).subscribe(data => {
      console.log(JSON.stringify(data));

    })


  }
  public themeColors(): void {
    Array.from(document.querySelectorAll('.theme-color')).forEach(function(el) {
      let elem = document.getElementsByClassName(el.classList[0])[0];
      let background = getStyle('background-color', elem);

      let table = document.createElement('table');
      table.innerHTML = `
        <table class="w-100">
          <tr>
            <td class="text-muted">HEX:</td>
            <td class="font-weight-bold">${rgbToHex(background)}</td>
          </tr>
          <tr>
            <td class="text-muted">RGB:</td>
            <td class="font-weight-bold">${background}</td>
          </tr>
        </table>
      `;

      el.parentNode.appendChild(table);
    });

  }
  constructor(private http: HttpClient){

  }

  ngOnInit(): void {
 this.http.get('http://localhost:8080/api/contacts/').subscribe(data => {
      console.log(JSON.stringify(data));
    this.data=data;
    })



  }
}

contacts.ts

export class Hero {
  name: number;
  number: string;
}

theme.modules.ts

// Angular
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { ColorsComponent } from './colors.component';
import { TypographyComponent } from './typography.component';

// Theme Routing
import { ThemeRoutingModule } from './theme-routing.module';
import { HttpClientModule } from '@angular/common/http';
import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'orderBy'
})


@NgModule({
  imports: [
    CommonModule,
    ThemeRoutingModule,
    HttpClientModule,
  ],
  declarations: [
    ColorsComponent,
    TypographyComponent
  ]
})
export class ThemeModule { }

Answer 1

您没有使用任何反应形式：

将FormGroup添加到您的组件中，并将其与html模板以及一些FormControl关联-全部来自ReactiveFormsModule。

示例可以在这里找到

https://angular.io/guide/reactive-forms

此外，删除不必要的提交按钮，并在表单上保留一个ngSubmit事件，无需具有多个提交事件，并将type = submit添加到您用作反应式表单的提交按钮。

角度-为什么来自表单的数据不会传递给component.ts

1 个答案: