How to access default value from template driven form of angular

Question

I have Created a template driven form in angular. And in that form for one input field I am getting value from another component. And I have assigned that value to the input field. I have created model also. And now I need to access that value after clicking ok button. In console I am getting empty value. How to get that dynamic value. Any help please

form.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>

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

}

form.model

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

    export class myModel{

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


    }

Answer 1

You are assigning value attribute as well as doing two way binding, that will not work. instead of this you can assign myValue in myModel.modelValue.value object in ngOnInit() method and just do two way binding as shown below

form.html

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

form.ts

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