не удалось установить значение для formControl

Question

Я пытаюсь установить значение в поле formConfrol ReferCode , принимая значение переменной, полученной из имени маршрута reff , где я не могу установить

Я делюсь кодом

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

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

Answer 2

• Удалите атрибуты value и [(ngModel)]
• Используйте только один из setValue и patchValue

Эта функция функционально аналогична setValue на этом уровне. Он существует для симметрии с patchValue в FormGroups и FormArrays, где он ведет себя по-разному.

Итак, ваш 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

В управляемых шаблонами формах для установки значений для части формы

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

В реактивных формах вы можете использовать

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

, вы можете установить значения по умолчанию внутри ngOnInit() илииспользуя событие щелчка (в методе).