未能为 formControl 设置值答案

【问题标题】：failed to set value to the formControl未能为 formControl 设置值
【发布时间】：2019-05-14 08:23:40
【问题描述】：

我正在尝试通过获取来自 Route name reff 的变量的值来为 formConfrol 字段 ReferCode 设置值，我无法设置的地方

我正在分享代码

ts >

ReferCode = new FormControl('');
  Refrr : any;
  constructor(

    private _route: ActivatedRoute,
  ) {
     this.user = new FormGroup({
    'ReferCode': this.ReferCode,
    });
    this._route.queryParams.subscribe(params => {
     this.Refrr = params['referral'];
     console.log(this.Refrr);
     if(this.Refrr){
     this.user.controls['ReferCode'].setValue(this.Refrr);
     this.user.controls['ReferCode'].patchValue(this.Refrr);
     }

html

 <form class="signin-form" novalidate (ngSubmit)="user_signup(user)" [formGroup]="user">

            <mat-form-field class="form-input-width">
              <input
                matInput
                placeholder="Enter Referral Code: (Optional)"
                value=""
                name="ReferCode"
                [(ngModel)]="referCode"
                formControlName="ReferCode"
              />

      <button mat-button >
        Sign Up
      </button>
    </form>

【问题讨论】：

你能不能把[(ngModel)]="referCode"删掉再试一次。
是的，我认为你不能同时使用 ngModule 和 formControl
@MohammadrezaImani 完全正确！！！
ReferCode 是一个独立的表单控件，但您似乎更新了一个名为 user 的表单组。两者有什么联系吗？

标签： angular angular6 angular7 angular-reactive-forms angular-forms

【解决方案1】：

最好的方法是这样使用patchValue()。

试试这个，以后肯定对你有很大帮助

this.user.patchValue({ReferCode:this.Refrr})

【讨论】：

【解决方案2】：

HTML：

<form class="signin-form" novalidate (ngSubmit)="user_signup(user)" [formGroup]="user">
    <mat-form-field class="form-input-width">
        <input
                matInput
                placeholder="Enter Referral Code: (Optional)" 
                name="ReferCode" 
                formControlName="ReferCode"
        />
    </mat-form-field>
        <button mat-button >
            Sign Up
        </button>
</form>

TS：

this.user.setValue('ReferCode', this.Refrr);

【讨论】：

【解决方案3】：

在模板驱动的表单中为表单的一部分设置值

@ViewChild('f') signupForm: NgForm;
this.signupForm.form.patchValue({
userData: {
    username: suggestedName
  }
});

在反应形式中，您可以使用

signupForm: FormGroup;
this.signupForm.patchValue({
userData: {
    username: 'suggestedName'
  }
});

您可以在ngOnInit() 内或使用点击事件（在方法内）设置默认值。

【讨论】：

【解决方案4】：

删除value 和[(ngModel)] 属性
只使用setValue和patchValue中的一个

此函数在功能上与此级别的 setValue 相同。它的存在是为了与 FormGroups 和 FormArrays 上的 patchValue 对称，但它的行为确实不同。

所以你的 HTML 代码将是

<form class="signin-form" novalidate (ngSubmit)="user_signup(user)" [formGroup]="user ">
    <mat-form-field class="form-input-width">
        <input matInput placeholder="Enter Referral Code: (Optional)" name="ReferCode" formControlName="ReferCode" />
  </mat-form-field>
<button mat-button>Sign Up</button>
</form>

Working_Demo

【讨论】：