Angular компонент не работает в FormGroup - PullRequest
Новая
       12

Angular компонент не работает в FormGroup

0 голосов
/ 15 февраля 2020

Я пытаюсь использовать внутри formGroup, но, хотя он создает компонент, и я могу перемещаться по параметрам, я не мог выбрать ни один из них. Когда страница загружена, я вижу эту ошибку:

ОШИБКА TypeError: "this._selectionModel.onChange не определена"

Вот мой component.ts: 

@Component({
  selector: 'app-agent',
  templateUrl: './agent.component.html',
  styleUrls: ['./agent.component.css']
})
export class AgentComponent implements OnInit {

  agents = [];
  durationInSeconds = 5;
  statusList = ['AVAILABLE', 'NOT_AVAILABLE'];
  agentForm = new FormGroup ({
    name: new FormControl(),
    status: new FormControl(this.statusList[0]),
  });
  searchForm = new FormGroup(
    {key: new FormControl()}
  );

  constructor(private agentService: AgentService) { }

  ngOnInit(): void {
    this.getAll();
  }

  filter(): void {
    if (this.searchForm.value.key) {
      this.getOne();
    } else {
      this.getAll();
    }
  }

  save(): void {
    this.agentService.save(new AgentData(this.agentForm.value.name, this.agentForm.value.status)).subscribe((data) => {
      this.agentForm.value.name = data.name;
      this.agentForm.value.status = data.status;
    }
    );
  }
}

И это компонент html part: 

        <form [formGroup]="agentForm" (submit)="save()">
          <table class="form-group" style="width: 100%; ">
            <div class="row" >
              <mat-form-field style="width: 100%; ">
                <mat-label>Agent name</mat-label>
                <input matInput placeholder="Ex. fferchichi" formControlName="name">
              </mat-form-field>
            </div>

            <div class="row">
              <mat-form-field style="width: 100%;">
                <mat-label>Status</mat-label>
                <mat-select formControlName="status">
                  <mat-option *ngFor="let status of statusList" [value]="status">
                    {{status | labelit}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="agentForm.hasError('required')">Please choose a Status</mat-error>
              </mat-form-field>
            </div>

            <div class="row" style="text-align: right;">
              <input type="submit" class="btn btn-default" value="Save"/>
            </div>

          </table>
        </form>

Такое ощущение, что привязка с formControl доступна только для чтения, но я не могу понять, почему или как это исправить.

Ответы [ 2 ]

1 голос
/ 15 февраля 2020

Согласно документации Angular .io для FormControl свойство 'value' доступно только для чтения.

вы должны использовать метод formcontrol.setValue () для изменения значения formcontrol

0 голосов
/ 15 февраля 2020

вы не можете просто присвоить значения для formcontrol, используя символ '=', у вас есть опции, т. Е. Если вы хотите использовать метод setValue или patchValue, я бы предложил вам использовать метод patchValue, потому что при использовании метода setValue Вы должны изменить все формы управления в вашей форме. так что попробуйте что-то вроде этого ...

this.searchForm.patchValue({ name: data.name, status: data.status });

...