无法使用反应式表单和Webapi添加或更新我的对象模型

Question

当我什么都没提交时发生！我正在使用反应形式来获取数据。然后模型对象不会更新或提交（添加）!!!!

这是我的代码：

HTML文件

    <mat-toolbar dir="rtl">
    <span>{{operationService.form.controls['TransID'].value? "تحيين":"عملية جديدة"}}</span>
    <span class="fill-remaining-space"></span>
    <button class="btn-dialog-close" mat-stroked-button (click)="onClose()" tabIndex="-1"><mat-icon>clear</mat-icon></button>
</mat-toolbar>
<form [formGroup]="operationService.form" class="normal-form" dir="rtl" (submit)="onSubmit()" >
<mat-grid-list cols="2" rowHeight="350px">
    <mat-grid-tile>
    <div class="controles-container">
        <input type="hidden" formControlName="TransID">
        <mat-form-field>
            <input formControlName="TransNo" matInput placeholder="عدد الإحالة*">
            <mat-error>تعمير هذه الخانة اجباري</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="Seller" matInput placeholder="xxxx*">
            <mat-error>تعمير هذه الخانة اجباري</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="Buyer" matInput placeholder="المشتري*">
            <mat-error>تعمير هذه الخانة اجباري</mat-error>
        </mat-form-field>
        <mat-form-field>
            <mat-select formControlName="Zone" placeholder="xxxx">
                <mat-option>None</mat-option>
                <ng-container *ngFor="let zone of zoneList">
                <mat-option value="{{zone.Zone1}}">{{zone.Zone1}}</mat-option>
                </ng-container>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-select formControlName="Statut" placeholder="xxxx">
                <mat-option>None</mat-option>
                <ng-container *ngFor="let state of stateList">
                <mat-option value="{{state.state}}">{{state.state}}</mat-option>
                </ng-container>
            </mat-select>
        </mat-form-field>
    </div>
    </mat-grid-tile>
    <mat-grid-tile>
    <div class="controles-container">
        <mat-form-field>
            <input formControlName="RequestDate" matInput [matDatepicker]="picker" placeholder="تاريخ الإحالة">
            <mat-datepicker-toggle matSuffix [for]="picker" ></mat-datepicker-toggle>
            <mat-datepicker #picker ></mat-datepicker>
        </mat-form-field>
        <mat-form-field>
        <mat-select formControlName="Agent" placeholder="المكلف بدراسة الملف">
                <mat-option>None</mat-option>
                <ng-container *ngFor="let agent of agentList">
                <mat-option value="{{agent.agent}}">{{agent.agent}}</mat-option>
                </ng-container>
        </mat-select>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="LOT" matInput placeholder="المقسم*">
            <mat-error>تعمير هذه الخانة اجباري</mat-error>
        </mat-form-field>
        <mat-form-field>
            <mat-select formControlName="TransType" placeholder="نوع العملية">
                <mat-option>None</mat-option>
                <ng-container *ngFor="let trans of transList">
                <mat-option value="{{trans.type}}">{{trans.type}}</mat-option>
                </ng-container>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="Observation" matInput placeholder="ملاحظات عامة">
        </mat-form-field>
        <div class="button-row">
            <button mat-raised-button color="primary" type="submit" [disabled]="operationService.form.invalid">تسجيل</button>
            <button mat-raised-button color="warn" (click)="onClear()">الغاء</button>
        </div>
    </div>
    </mat-grid-tile>
</mat-grid-list>
</form>

组件文件

onSubmit() {

    if  (this.operationService.form.valid)
    {
     if (!this.operationService.form.get('TransID').value)
        this.operationService.saveOrUpdateOperation(this.operationService.form.value); //add

     else
       this.operationService.saveOrUpdateOperation(this.operationService.form.value);
       this.operationService.form.reset();
       this.operationService.initializeFormGroup();
       this.notificationService.success(':: Submitted successfully');
       this.onClose();
    }
   }

服务文件

export class OperationService {

  form: FormGroup= new FormGroup({TransID: new FormControl(null),TransNo: new FormControl(null),RequestDate: new FormControl(''),
    Agent: new FormControl(0),TransType: new FormControl(0),Buyer:  new FormControl('', Validators.required),
    LOT:new FormControl(),Seller: new FormControl('', Validators.required),ZoneID: new FormControl(null),
    Zone: new FormControl(0),Statut: new FormControl(0),Observation: new FormControl(''),Gouv:new FormControl('')

  });

  private newOperation: Operations;


  constructor(private http: HttpClient) { 

  }

 initializeFormGroup() {
    this.form.setValue({TransID: null,TransNo:null,RequestDate:'',Agent:0,TransType:0,Buyer: '',
      LOT: '',Seller: '',ZoneID:0,Zone: 0,Statut: 0,Observation:'',Gouv:''

    });
  }

  saveOrUpdateOperation(operation) {

   this.newOperation = new Operations(operation)
   return this.http.post(environment.apiURL + '/Operations', this.newOperation);
  }

这是我的模型==> TransID是sql server中的自动列

型号

export class Operations {

    TransID: number;TransNo : number;TransType:string;ZoneID: number;
    RequestDate: Date;Agent:string;Buyer:string;Seller:string;LOT:string;
    Gouv:string;Statut:string;Observation:String


    public constructor(init?: Partial<Operations>) {
        Object.assign(this, init);
    }
}

网络API

 [ResponseType(typeof(Operation))]
        public IHttpActionResult PostOperation(Operation operation)
        {
            try
            {
                //Operations table
                if (operation.TransID == 0)
                {

                    db.Operations.Add(operation);
                }
                else
                {
                    db.Entry(operation).State = EntityState.Modified;
                }


                db.SaveChanges();

                return Ok();
            }

            catch (Exception ex)
            {

                throw ex;
            }

        }

未到达Web api方法我的代码有什么问题!!!

Answer 1

 <input type="hidden" formControlName="TransID">

TransID永远不会获得值，因此您提交时的条件始终为假？