angular - 找不到名称为“َAgent”的控件

Question

使用反应形式来获取 mat-select 值，但它给出错误找不到名称控制：'AGENT'：这是我的代码

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="البائع*">
            <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="المنطقة السقوية">
                <mat-option>None</mat-option>
                <ng-container *ngFor="let zone of zoneList">
                <mat-option value="{{zone.Zone_ID}}">{{zone.Zone1}}</mat-option>
                </ng-container>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-select formControlName="Statut" placeholder="رأي الوكالة">
            <mat-option>في طور الدراسة</mat-option>
            <mat-option value="option1">القبول</mat-option>
            <mat-option value="option2">الرفض</mat-option>
            <mat-option value="option3">اعادة النظر</mat-option>
            </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.agentID}}">{{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>لا يوجد</mat-option>
            <mat-option value="X1">بيع</mat-option>
            <mat-option value="X2">مقاسمة</mat-option>
            <mat-option value="X3">معاوضة</mat-option>
            </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>

角度接受区域和法规的垫选择并拒绝代理和转换！为什么 ？？？

运营服务

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Operations } from './operation.model';
import { environment } from 'src/environments/environment';
import { FormGroup, FormControl, Validators, Form } from "@angular/forms";
import * as _ from 'lodash';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

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('')
      
  });

  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:Operations) {
  
    return this.http.post(environment.apiURL + '/Operations', operation);
  }

  getOperationsList():Observable<Operations>  {

    return this.http.get<Operations>(environment.apiURL + '/Operations')
  }

  getOperationByID(id:number):any {
    return this.http.get(environment.apiURL + '/Operations/'+id).toPromise();
  }

  deleteOperation(id:number) {
    return this.http.delete(environment.apiURL + '/Operations/'+id).toPromise();
  }

  populateForm(Operation) {

  //this.form.setValue(_.omit(Operation));
    this.form.setValue(Operation);
    
  }

}

我的代码有什么问题？

标签： angularangular-material

Answer 1

我认为问题在于您的 html 中 TransType 和 Agent 之前的“َ 字符，如您所见：

<mat-select formControlName="َTransType" placeholder="نوع العملية">

和

<mat-select formControlName="َAgent" placeholder="المكلف بدراسة الملف">