如何從 angular 的模板驅動形式訪問默認值

Question

我在 angular 中創建了一個模板驅動的表單。 在一個輸入字段的那種形式中，我從另一個組件中獲得了價值。 我已將該值分配給輸入字段。 我也創建了 model。 現在我需要在單擊確定按鈕后訪問該值。 在控制台中，我得到了空值。 如何獲得該動態值。 請提供任何幫助

表格.html

    <form name="form" #f="ngForm" class="form-horizontal">



         <div class="form-row">

            <label>Remaining qty: &nbsp;&nbsp;</label>

           <div class="form-group col-md-3">
             <input type="text" [value]="myValue"  class="form-control" [(ngModel)]="myModel.modelValue.value"  name="modelValue" readonly>
          </div>
        </div> 

  <button type="button" class="btn btn-primary" (click)="submit()">OK</button>
    </form>

表格.ts

import { Component, OnInit ,Input} from '@angular/core';
import { MyModel } from './myModel.model';


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

    constructor(){
    }

  myModel: MyModel= new MyModel();
   rowData:any;

  @Input() myValue:any;


  ngOnInit() {
  }


  submit(){

    console.log(this.myModel);

}

表格.model

import { BasicSearchModelI, BasicSearchKey } from '../base';

    export class myModel{

          modelValue: BasicSearchModelI = {
                value: '',
                apiKey: 'modelValue'
          };


    }

Answer 1

您正在分配值屬性以及進行兩種方式綁定，這將不起作用。 而不是這個，您可以在ngOnInit()方法中的myModel.modelValue.value object 中分配myValue ，然后進行兩種方式綁定，如下所示

表格.html

<input type="text" class="form-control" [(ngModel)]="myModel.modelValue.value" name="modelValue" readonly>

表格.ts

ngOnInit()
{
     myModel.modelValue.value = myValue;
}