Question

我正在尝试通过获取来自路由名称 ref 的变量的值来为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>

Answer 1

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

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

以反应形式，您可以使用

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

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

Answer 2

删除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

Answer 3

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

尝试一下，将来肯定会对您有很大帮助

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

Answer 4

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);

无法将值设置为formControl

4 个答案: