iT邦幫忙

0

angular form 外部套件抓值

目前用了時間套件clockpicker,可以正常顯示在欄位上,但發現表抓不到值,
一般的text欄位抓得到沒問題,好像angular有分開什麼顯示跟實質的值的位置不同?

<form action="" (ngSubmit)="onSubmit()" #f="ngForm">
<div class="input-group clockpicker">
<input type="text" id="time" name="time" ngModel>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</form>
@ViewChild('f') signupForm: NgForm;

onSubmit( ) {
console.log(this.signupForm);
}

1 個回答

0
Homura
iT邦研究生 2 級 ‧ 2018-08-10 09:28:08
最佳解答

改這樣

jquery.clockpickey.d.ts

interface JQuery {
    clockpicker:(options?: any) => JQuery;
}

html

<form action="" (ngSubmit)="onSubmit()">
    <div class="input-group clockpicker">
        <input type="text" id="time" name="time" [(ngModel)]="timeObj">
        {{ timeObj }}
        <button type="submit">送出</button>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
</form>

component.ts

export class AppComponent implements AfterViewInit  {
  timeObj:string = '';
  
  ngAfterViewInit(){
    $('#time').clockpicker({
      afterDone: () => {
        this.timeObj = <string>$('#time').val();
      }
    });
  }
  onSubmit() {
    console.log(this.timeObj);
  }
}
看更多先前的回應...收起先前的回應...
Zaku iT邦新手 4 級 ‧ 2018-08-10 09:36:09 檢舉

我有試過,一樣抓不到,一般的欄位可以

Homura iT邦研究生 2 級 ‧ 2018-08-10 09:42:11 檢舉

Zaku
喔...
你是說你的日曆原件輸入進去為什麼會沒值嗎?
剛試了手打會有值

Zaku iT邦新手 4 級 ‧ 2018-08-10 10:12:29 檢舉

恩手打會有,問題是套件自選出來的會顯示,但不會有"真的"值可以抓

fysh711426 iT邦研究生 5 級 ‧ 2018-08-10 13:08:23 檢舉

哈哈哈,對 ng2 不熟,
但會不會是類似 ng1 沒有 $scope.$apply(); 的情況,
clockpicker 選完時間,因為沒有支援 ng2,所以不會更新到 ngModel 上,
而直接輸入可以是因為 ng2 預設有綁 input 事件,
如果想簡單解決,我會用 jquery 直接抓 input。
/images/emoticon/emoticon16.gif

Homura iT邦研究生 2 級 ‧ 2018-08-10 13:35:00 檢舉

fysh711426
是的
是你說的狀況
可是我覺得比較理想的做法是
當他選完日期後在binding給ngModel

Homura iT邦研究生 2 級 ‧ 2018-08-10 13:38:47 檢舉

Zaku
我更新囉

Zaku iT邦新手 4 級 ‧ 2018-08-10 14:26:26 檢舉

感恩,所以這樣變成要分開接收不能統一從f: NgForm去收資料?

Zaku iT邦新手 4 級 ‧ 2018-08-10 14:31:33 檢舉

這樣應該可以在afterDone: () => { $(this).click()或.focus() }之類的觸發存檔?

Homura iT邦研究生 2 級 ‧ 2018-08-10 14:31:42 檢舉

Zaku
是的
f:NgForm好像從後面叫不到
不過還是建議找個支援NG的套件會更好

Homura iT邦研究生 2 級 ‧ 2018-08-10 14:32:34 檢舉

你可以試試看我就不試了@@

Zaku iT邦新手 4 級 ‧ 2018-08-10 14:33:13 檢舉

恩但應該滿難避免的,angular2才沒多久的時間,碰到就解一下當學習

Homura iT邦研究生 2 級 ‧ 2018-08-10 15:02:41 檢舉

Zaku
喔....
我突然發現他是有丟回來的
他是丟到f.value.time
不是丟到f.value.timeObj裡....

剛把f整個console.log()出來
突然發現這件事/images/emoticon/emoticon16.gif

fysh711426 iT邦研究生 5 級 ‧ 2018-08-10 19:15:04 檢舉

那是不是代表不是 $apply() 的問題,
不過 f.value.time 抓的到值, this.timeObj 怎麼抓不到呢,ngModel 明明是綁在 timeObj 上,好難理解阿。
/images/emoticon/emoticon06.gif

Homura iT邦研究生 2 級 ‧ 2018-08-12 13:15:27 檢舉

fysh711426
我猜他是抓input name的值
不是抓ngModel
禮拜一回公司在驗證看看

Zaku iT邦新手 4 級 ‧ 2018-08-13 15:15:04 檢舉

目前是先把$('#time').val();來到外面實作,包在裡面的話要是很多欄位就要定義好幾個$('#time').clockpicker太冗長

Homura iT邦研究生 2 級 ‧ 2018-08-13 16:13:47 檢舉

fysh711426
我早上試了一下去掉ngModel的話 ngForm又抓不到了
然後有ngModel
但是選日期時沒去更心ngModel的話ngForm又抓不到
難怪大家都不推Jquery跟NG一起用...搞得很混亂/images/emoticon/emoticon06.gif
Zaku
自己覺得可以就行了/images/emoticon/emoticon07.gif

fysh711426 iT邦研究生 5 級 ‧ 2018-08-14 01:27:20 檢舉

可能 f.value.time 會去抓 this.timeObj 的值,
想測試,可是又不想裝 ng6,哈哈哈。

Jquery 和 ng1 只要注意 $apply() 還蠻好用的,不過 ng2 以上就沒有研究了,感覺複雜好多。
/images/emoticon/emoticon06.gif

Homura iT邦研究生 2 級 ‧ 2018-08-14 08:50:30 檢舉

fysh711426
那你應該玩玩看Vue.js 2
他跟ng1有很多很像的地方
而且更好用/images/emoticon/emoticon07.gif

fysh711426 iT邦研究生 5 級 ‧ 2018-08-14 08:58:40 檢舉

想玩,不過 Vue 不支援 IE8 不能用在專案。 /images/emoticon/emoticon02.gif

Zaku iT邦新手 4 級 ‧ 2018-08-14 09:44:22 檢舉

真的很複雜問題都不知道在哪,想查也不知從哪裡查起。vue不支援IE8?!

我要發表回答

立即登入回答