在表单中一起使用 ngModel 和 formControlName

问题描述

在我的 Spring 应用程序中,我从用户那里获取一个 XML 文件,对其进行解析,然后以一种形式向用户显示值以生成许可证密钥。 HTML 是:

    <h1 mat-dialog-title color="primary">Generate New License</h1>
    <mat-dialog-content >
        <div style="width:100%;display: flex;flex-direction: column;">

      <mat-form-field>
        <mat-label>Customer Name</mat-label>
        <input matInput [(ngModel)] = "data[0].customerName" type="text" id="customerName"  name="customerName" placeholder="Enter the Customer Name">
        <mat-error *ngIf="submitted && hasError('customerId','required')">Enter the Customer Name</mat-error>
      </mat-form-field> 
      
      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput [(ngModel)] = "data[0].emailAddress" type="text" id="emailAddress"  name="emailAddress"  placeholder="Ex.: johndoe@abc.com">
        <mat-error *ngIf="submitted && hasError('emailAddress','required')">Enter the E-Mail <Address></Address></mat-error>
      </mat-form-field> 

      <mat-form-field>
        <mat-label>Phone Number</mat-label>
        <input matInput [(ngModel)] = "data[0].phoneNumber" type="text" id="phoneNumber"  name="phoneNumber" placeholder="Enter the Phone Number">
        <mat-error *ngIf="submitted && hasError('phoneNumber','required')">Enter the Phone Number</mat-error>
      </mat-form-field> 

      <mat-form-field>
        <mat-label>Hardware Key</mat-label>
        <input matInput [(ngModel)] = "data[0].hardwareKey" type="text" id="hardwareKey"  name="hardwareKey" placeholder="Enter the Hardware Key">
        <mat-error *ngIf="submitted && hasError('hardwareKey','required')">Enter the Hardware Key</mat-error>
      </mat-form-field>
      <br>
      
      <mat-form-field>
        <mat-label>IP Address</mat-label>
        <input matInput [(ngModel)] = "IpAddress" type="text" id="IpAddress" name="IpAddress" placeholder="Enter IP Address">
        <mat-hint>Enter valid IP Address only</mat-hint>
      </mat-form-field>
      <br>
      <br>
      
      <strong>* Default Expiration Date for all licenses is 01/01/2100 *</strong><br>
      <br>
      </div>
    </mat-dialog-content>
    <br><br>
    <mat-dialog-actions align="end">
      <button mat-button mat-raised-button color="primary" (click)="generateLicense()">SUBMIT</button>
      <button mat-button mat-raised-button color="primary" type="reset">RESET</button>
      <button mat-button mat-raised-button color="warn" mat-dialog-close cdkFocusInitial >CLOSE</button>
    </mat-dialog-actions>
    <br>
    <mat-form-field class="generate-full-width">
      <input matInput [readonly]="!editable"  id="scrollmenu" style="margin-left:200px" placeholder="License Key" style="font-weight: bold;" value={{this.LicenseKey}}>
    </mat-form-field><br><br>
    <button type="button" style="margin-left:200px" (click)="copyLicensetoClipboard(this.LicenseKey)" class='btn btn-primary'>copy License Key</button>

点击提交生成许可证密钥。 component.ts 是:

export class LicenseXmlDialog implements OnInit {
  editable: boolean = false;
  LicenseKey: string = "";
  form: FormGroup;
  submitted: boolean = false;
  matcher = new MyErrorStateMatcher();
  minDate = new Date();
  
  constructor(
    private fb: FormBuilder,public dialogRef: MatDialogRef<LicenseXmlDialog>,private generateLicenseService: GeneratelicenseService,@Inject(MAT_DIALOG_DATA) public data) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      hardwareKey: ['',Validators.required],IpAddress: ['',emailAddress: ['',phoneNumber: ['',customerId: ['',expirationDate: [''],});
  }

  generateLicense() {
    this.submitted= true;
    const { value,valid } = this.form;
    let hardwareKey = this.data[0].hardwareKey;
    let IpAddress = this.form.value.IpAddress
    let emailAddress = this.data[0].emailAddress;
    let phoneNumber = this.data[0].phoneNumber;
    let customerId = this.data[0].customerName;
    
    let expirationDate = JSON.parse(JSON.stringify("Friday,1 January 2100 05:30:00 GMT+05:30"));
    
    
    this.generateLicenseService.newLicense(hardwareKey,IpAddress,emailAddress,phoneNumber,customerId,expirationDate)
    .subscribe((data) => {
      console.log(data["LicenseKey"])
      this.LicenseKey = data["LicenseKey"];
    })
  
    console.log(value)
    if (valid) {
      //this.dialogRef.close(value);
      this.form.reset();
    } 

  }
  // validation for input fields
  public hasError = (controlName: string,errorName: string) => {
    return this.form.controls[controlName].hasError(errorName);
  }

当我单击提交时,会生成许可证密钥,但 IP 地址为空或空。我解密了许可证密钥,并为此使用了 console.log。 XML 文件永远不会有 IP 地址。我该怎么做才能从 XML 获取其他值,但 IP 地址作为用户输入。由于 nngModel 和 formCntrolName 不能一起工作,我该如何规避这个问题?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)