表单组下拉菜单内容不存在于json,Angular 6中

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (41)

我已经成立了一个表格组,目的是注册汽车。

在提交时,它从插入的值生成JSON。

问题是下拉菜单中的值不存在于JSON中。下拉菜单中填充了下面显示的选项,并且是表单组中的第一个条目。

标签名称和错误消息是挪威语,但本质应该在那里。

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-12 offset-md-4">
        <h3>Fyll inn</h3>
        <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
          <div class="form-group">
            <label for="CarType">Bil type</label>
            <select id="CarType" name="CarType" [(ngModel)]="CarType" class="form-control">
              <option [ngValue]="CarType" *ngFor="let CarType of CarTypes" [value]="CarType.Id">{{CarType.Name}}</option>
            </select>
          </div>
          <div class="form-group">
            <label for="LicensePlate">Skiltnummer</label>
            <input type="text" class="form-control" name="LicensePlate" [(ngModel)]="model.LicensePlate" #LicensePlate="ngModel" [ngClass]="{ 'is-invalid': f.submitted && LicensePlate.invalid }" required />
            <div *ngIf="f.submitted && LicensePlate.invalid" class="invalid-feedback">
              <div *ngIf="LicensePlate.errors.required">Skiltnummer er påkrevd</div>
            </div>
          </div>
          <div class="form-group">
            <label for="KilometersDriven">Kilometerstand</label>
            <input type="number" class="form-control" name="KilometersDriven" [(ngModel)]="model.KilometersDriven" #KilometersDriven="ngModel" [ngClass]="{ 'is-invalid': f.submitted && KilometersDriven.invalid }" required />
            <div *ngIf="f.submitted && KilometersDriven.invalid" class="invalid-feedback">
              <div *ngIf="KilometersDriven.errors.required">Kilometerstand er påkrevd</div>
            </div>
          </div>
          <div class="form-group">
            <label for="Seats">Antall seter</label>
            <input type="number" class="form-control" name="Seats" [(ngModel)]="model.Seats" #Seats="ngModel" [ngClass]="{ 'is-invalid': f.submitted && Seats.invalid }" required />
            <div *ngIf="f.submitted && Seats.invalid" class="invalid-feedback">
              <div *ngIf="Seats.errors.required">Antall seter er påkrevd</div>
            </div>
          </div>
          <div class="form-group">
            <label for="Gears">Antall gir</label>
            <input type="number" class="form-control" name="Gears" [(ngModel)]="model.Gears" #Gears="ngModel" [ngClass]="{ 'is-invalid': f.submitted && Gears.invalid }" required />
            <div *ngIf="f.submitted && Gears.invalid" class="invalid-feedback">
              <div *ngIf="Gears.errors.required">Antall gir er påkrevd</div>
            </div>
          </div>

          <div class="form-group">
            <button class="btn btn-primary">Registrer</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
import { Component, OnInit } from '@angular/core';
import { CarType } from 'src/shared/models/cartype.model';


@Component({
  selector: 'app-add-car',
  templateUrl: './add-car.component.html',
  styleUrls: ['./add-car.component.css']
})
export class AddCarComponent implements OnInit {
  CarTypes: CarType[] = [
    { Id: 1, Name: 'SUV' },
    { Id: 2, Name: 'Coupe' },
    { Id: 3, Name: 'Sedan' }
  ]


  model: any = {};

  onSubmit() {
    console.log(this.model)
    alert('SUCCESS \n\n' + JSON.stringify(this.model))
  }

  constructor() { }

  ngOnInit() {

  }

}
export class CarType {
  Id: number;
  Name: String;
}

右侧是网站填写表格的链接。

右边是从上一张图片创建的JSON回复的图像

{LicensePlate: "RH123123", KilometersDriven: 120000, Seats: 5, Gears: 6}
提问于
用户回答回答于

您没有将它与模型对象绑定 [(ngModel)]="CarType"

 <select id="CarType" name="CarType" [(ngModel)]="model.carType" class="form-control">
              <option [ngValue]="CarType" *ngFor="let CarType of CarTypes" [value]="CarType.Id">{{CarType.Name}}</option>
            </select>

扫码关注云+社区

领取腾讯云代金券