angular - Angular - Value not being passed to Modal view

Question

I am trying to pass through a value to a modal component, I followed this tutorial: https://itnext.io/creating-forms-inside-modals-with-ng-bootstrap-221e4f1f5648.

I can see the value being passed through, but not being retained on the other side. Any ideas why?

// Component being sent from 

openModal(millerIndex: number, farmIndex: number, view: number, millerName: string) {
  const modalRef = this.modalService.open(ModalComponent);
  modalRef.componentInstance.millerIndex = millerIndex;
  modalRef.componentInstance.farmIndex = farmIndex;
  modalRef.componentInstance.view = view;
  modalRef.componentInstance.millerName = millerName;

  modalRef.result.then((result) => {
    console.log(result);
  }).catch((error) => {
    console.log(error);
  });
}

// Modal component with relevant imports

@Input() millerIndex: number;
@Input() farmIndex: number;
@Input() view: number;
@Input() millerName: string;
@Input() farmName: string;
modalTitle = '';

// Being called OnInit()
createForm() {
if (this.view === 1) {

  this.myForm = this.formBuilder.group({
    paddockCode: new FormControl('', Validators.required),
    paddockArea: new FormControl('', Validators.required),
    paddockOwner: new FormControl({value: this.farmName, disabled: 
    true}, Validators.required)
  });
}

// HTML inside form
<div class="form-group">
  <label for="paddock-owner">Owner</label>
  <input type="text" class="form-control" 
     formControlName="paddockOwner" value="{{ farmName }}" />
</div>

标签： angular

Answer 1

正如上面提到的戴尔，我没有通过farmName。

openModal(millerIndex: number, farmIndex: number, view: number,
  millerName: string, farmName: string) {
  const modalRef = this.modalService.open(ModalComponent);
  modalRef.componentInstance.millerIndex = millerIndex;
  modalRef.componentInstance.farmIndex = farmIndex;
  modalRef.componentInstance.view = view;
  modalRef.componentInstance.millerName = millerName;
  modalRef.componentInstance.farmName = farmName;

  modalRef.result.then((result) => {
    console.log(result);
  }).catch((error) => {
    console.log(error);
  });
}