Question

我正在尝试提交一个有角度的表格。它提交成功，但是所有属性均为空值。当前没有应用验证。

这里是组件

export class AdvertComponent implements OnInit {

  property: Property;
  photo: Photo;
  user: User;
  advertForm: FormGroup;

  constructor(private advertService: AdvertService, private alertify: AlertifyService, public authService: AuthService,
    private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createAdvertForm();
  }

  createAdvertForm() {
    this.advertForm = this.formBuilder.group({
      town: ['', Validators.required],
      county: ['', Validators.required],
      address: ['', Validators.required],
      postcode: ['', Validators.required],
      eircode: ['', Validators.required],
      propertyType: ['', Validators.required],
      sellingType: ['', Validators.required],
      price: ['', Validators.required],
      bedrooms: ['', Validators.required],
      bathrooms: ['', Validators.required],
      size: ['', Validators.required],
      buildingEnergyRating: ['', Validators.required],
      description: ['', Validators.required],
    });
  }

  submitAdvert() {
        this.property = Object.assign({}, this.advertForm.value);

    this.advertService.createAdvert(this.authService.decodedToken.nameid, this.property).subscribe(() => {
      this.alertify.success('Success');
    }, error => {
      this.alertify.error(error);
    });
  }
}

这是角形。

<div class="container">
    <form [formGroup]="advertForm" (ngSubmit)="submitAdvert()">
        <h2 class="text-center text-primary">Fill out the form below</h2>
        <hr>

        <div class="form-group">
          <input type="text" class="form-control" formControlName="town" placeholder="town">
          <div class="invalid-feedback">Please select a town.</div>
        </div>
         <div class="form-group">
            <input type="text" class="form-control" formControlName="county" placeholder="County">
            <div class="invalid-feedback">Please select a county.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="address" placeholder="address">
            <div class="invalid-feedback">Please select a address.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="postcode" placeholder="postcode">
            <div class="invalid-feedback">Please select a postcode.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="eircode" placeholder="eircode">
            <div class="invalid-feedback">Please select a eircode.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="propertyType" placeholder="propertyType">
            <div class="invalid-feedback">Please select a property type.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="sellingType" placeholder="sellingType">
            <div class="invalid-feedback">Please select a sellingType.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="price" placeholder="price">
            <div class="invalid-feedback">Please select a price.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="bedrooms" placeholder="bedrooms">
            <div class="invalid-feedback">Please select a bedrooms.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="bathrooms" placeholder="bathrooms">
            <div class="invalid-feedback">Please select a bathrooms.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="size" placeholder="size">
            <div class="invalid-feedback">Please select a size.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="buildingEnergyRating" placeholder="buildingEnergyRating">
            <div class="invalid-feedback">Please select a Building Energy Rating.</div>
        </div>

        <div class="form-group">
            <input type="text" class="form-control" formControlName="description" placeholder="description">
            <div class="invalid-feedback">Please select a description.</div>
        </div>

        <button class="btn btn-primary" type="submit">Submit</button>
    </form>
</div>

submitAdvert（）方法是提交表单时命中的函数。对这个问题有什么想法吗？

来自广告服务的

createAdvert方法，该方法正被注入到广告组件中。

  createAdvert(id: number, property: Property) {
    return this.http.post(this.baseUrl + id + '/' + 'advert', {property});
  }

Answer 1

即使表格无效，您也可以提交表格。通过选中this.advertForm.valid，您可以阻止表单提交。

https://angular.io/guide/form-validation

您可以通过执行this.advertForm.get('county').valid来检查表单中的特定控件是否有效。上面共享的链接中有更多详细信息。

Answer 2

您可以使用Forms invalid属性来禁用“提交”按钮，该按钮根据表单验证返回true或false，因此示例代码如下：

<button class="btn btn-primary" type="submit [disabled]="advertForm.invalid">Submit</button>

，如果您希望每个控件的错误消息都是动态的，则可以将valid属性与FormControl的ngIf伪指令一起使用，例如：

<div class="invalid-feedback" *ngIf="!advertForm.get('town').valid">
    Please select a town.
</div>

Stackblitz

Answer 3

删除“ {property}”周围的花括号，它已经是一个对象，不需要任何花括号，下面的代码：

 createAdvert(id: number, property: Property) {
    return this.http.post(this.baseUrl + id + '/' + 'advert', property);
 }

角度表单提交-所有字段均以空值提交

3 个答案: