Angular - Formcontrolname 及其来自表格网格的验证

如何解决Angular - Formcontrolname 及其来自表格网格的验证

我在这里使用 angular 8 我有一个疑问，写在下面

我的 Json 格式来自后端

rowData = [
    { make: "Toyota",model: "Celica",price: 35000 },{ make: "Ford",model: "Mondeo",price: 32000 },{ make: "Porsche",model: "Boxer",price: 72000 }
  ];

我需要像数量一样向后端发送数据

data={ make: "Toyota",price: 35000,quantity: 1 }

1. 我需要从特定行中选取数据，并且在单击特定复选框时不得允许其余行 就像我在单击第 1 行后单击第 1 行复选框一样，必须禁用第 2 行第 3 行

{ make: "Toyota",price: 35000}
quantity seperately
but need to be like 
{ make: "Toyota",quantity: 1 }

我添加的图片供参考

我在下面写代码

HTML 部分

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>



<div>
  <table border>
    <thead>
      <tr>
        <th>Sl: no</th>
        <th>Make</th>
        <th>Model</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Pick</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let a of rowData; index as i ">
        <td>{{i + 1}}</td>
        <td>{{a.make}}</td>
        <td>{{a.model}}</td>
        <td>{{a.price}}</td>
        <td> <input type="number"[formControl]="quantity"> </td>
        <td><input type="checkbox" (click)="getData(a,quantity.value)"  ></td>
      </tr>  
    <tbody>
  </table>
</div>

Ts 部分

import { Component,VERSION } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  quantity = new FormControl(0);
  rowData = [
    { make: 'Toyota',model: 'Celica',{ make: 'Ford',model: 'Mondeo',{ make: 'Porsche',model: 'Boxter',price: 72000 }
  ];

  getData(data,qty) {
    console.log('data in a row',data);
    console.log('Quantity',qty);
  }

  submit() {}
}

模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule,FormsModule,ReactiveFormsModule],declarations: [AppComponent,HelloComponent],bootstrap: [AppComponent]
})
export class AppModule {}

帮我解决这个问题

stackbiltz https://stackblitz.com/edit/angular-ivy-dno7uw

解决方法

如果我理解正确，你需要发生的是当一个复选框被选中时：

1. 需要禁用所有其他复选框
2. 提交选择的数量

那么这里有一个简单的方法：

export class AppComponent  {

  name = 'Angular ' + VERSION.major;

  rowData = [];

  ngOnInit(){
    //init data
    this.rowData = this.fetchData();
  }

  fetchData(){
    let data = [
      { make: 'Toyota',model: 'Celica',price: 35000 },{ make: 'Ford',model: 'Mondeo',price: 32000 },{ make: 'Porsche',model: 'Boxter',price: 72000 }
    ];

    //need to add a 'disabled' field and a 'quantity' field to the existing data.
    //this returns a new set of data
    return data.map(row => {
      return Object.assign({},row,{disabled:false,quantity: 0});
    });

  }

  getData(data,indexOfSelectedRow,qty) {

    //disable all other checkboxes
    this.rowData.forEach( (row,index) => {

      if(indexOfSelectedRow != index)
      {
        row.disabled = true
      }
    })

    let rowToSave = {
      make: data.make,model: data.model,price: data.price,quantity: +qty //+ casts a string to a number
    };

    //submit data
    this.submit(rowToSave);
  }

  submit(data) {
    console.log('save to db',data);
  }
}

并在您的模板中：

<tr *ngFor="let a of rowData; index as i ">
        <td>{{i + 1}}</td>
        <td>{{a.make}}</td>
        <td>{{a.model}}</td>
        <td>{{a.price}}</td>
        <!-- #quantity creates a local template variable,which gives us access to the input value to use in the getData method of the checkbox -->
        <td><input type="number" [value]="a.quantity" #quantity/></td>
        <td><input type="checkbox" (click)="getData(a,i,quantity.value)" [disabled]="a.disabled"/></td>
      </tr>