Как привязать значение отключенного ввода в реактивной форме Angular 7

Я не могу связать один из моих входов из FormGroup:

<input matInput placeholder="Center" value="Manila" formControlName="location" disabled>

Тоже не отключается.

Когда я вставляю [(ngModel)]="location", чтобы получить значение, говорят, что оно удалено или устарело. Однако вход отключен.

Моя форма (фрагмент):

<mat-form-field class="tribe-full-width">
    <input matInput placeholder="Tribe Name" value="" formControlName="tribeName">
</mat-form-field>
<mat-form-field class="tribe-full-width">
    <input matInput placeholder="Tribe Leader Name" value="" formControlName="tribeLeader">
</mat-form-field>
<mat-form-field class="tribe-full-width">
    <input matInput placeholder="Center" value="Manila" formControlName="location">
</mat-form-field>

Мой компонент:

onSubmitTribeData() {
  console.log(this.tribeForm.value);
}

addTribe(){
  if (this.showForm === false) {
    this.showForm = true;
    this.tribeForm.controls['dtcLocation'].disable(); 
    this.tribeForm = this.fb.group({
      tribeName: [''],
      tribeLeader: [''],
      location: [''],
      tribeSquad: ['']
    });
  } else {
    this.showForm = false;
  }
}

angular angular-reactive-forms formgroups
person Mark    schedule 10.07.2019    source источник
comment
Не могли бы вы продемонстрировать проблему в фрагменте stackblitz?   -  person korteee    schedule 10.07.2019
comment
чтобы показать значения, используйте myForm.getRawValue(), а не myForm.value: angular.io/api/ form/FormGroup#getRawValue, чтобы задать значение, используйте myForm.get('location').setValue() и НИКОГДА не используйте вместе [ngModel] и formControlName для переменной, принадлежащей formGroup   -  person Eliseo    schedule 10.07.2019

Ответы (2)


arrow_upward
0
arrow_downward

Предполагая, что вы настроили свою реактивную форму следующим образом:

export class YourComponent {
  myForm = new FormGroup({
    location: new FormControl(''),
  });

  constructor() {}

  someFunction(): any {
    // You can access the value of an input as follows:
    const value = this.myForm.get('location').value;
  }
}

Вы можете отключить ввод в своем шаблоне через [attr.disabled]:

<input matInput [attr.disabled]="true" placeholder="Center" value="DTC Manila" formControlName="location">

Или вы можете сделать это программно в своем компоненте:

this.myForm.controls['location'].disable(); 
this.myForm.controls['location'].enable(); // To re-enable the input.

Примечание. [(ngModel)] не следует использовать с реактивными формами, так как поддерживается использование входных данных ngModel. свойство и событие ngModelChange с директивами реактивной формы устарели в Angular v6 и были удалены в Angular v7.

person Andrew Hill    schedule 10.07.2019
comment
Если location всегда отключен, вы можете инициализировать его так: location: new FormControl({value: '', disabled: true}). - person youri; 10.07.2019
comment
Привет, я отредактировал свой пост. Пожалуйста, проверь это. Также я использовал [attr.disabled]=true и this.myForm.controls['location'].disable(); но это не сработало - person Mark; 10.07.2019
comment
@Mark. Шаги, описанные в этом ответе, показывают, как вы отключаете ввод в реактивных формах Angular. Чтобы мы могли помочь вам в дальнейшем, вам необходимо предоставить минимальный воспроизводимый пример проблемы, с которой вы столкнулись. - person Andrew Hill; 10.07.2019

arrow_upward
0
arrow_downward

Попробуй это;

this.formGroup.controls['controlName'].setValue(value);

Пожалуйста, избегайте использования атрибута disabled с реактивными формами. Либо вы можете инициализировать элемент управления с помощью;

new FormControl({value: '', disabled: true})

или используйте это, когда вы хотите отключить элемент управления;

this.formGroup.controls['controlName'].disable();
person Vinayak    schedule 10.07.2019