ਕੋਰਸ ਸਿਫਾਰਸ਼:

AngularJS ਇਨਪੁਟ ਨਿਰਦੇਸ਼ਕ

ਨਿਰਧਾਰਣ ਅਤੇ ਵਰਤੋਂ <input> ਮੌਦਰੇ ਦੇ ਮੂਲ ਵਿਵਹਾਰ ਨੂੰ ਸੰਸ਼ੋਧਤ ਕਰਦਾ ਹੈ, ਪਰ ਉਸ ਸਮੇਂ ਜਦੋਂ ng-model ਗੁਣ ਮੌਜੂਦ ਹੁੰਦਾ ਹੈ。

ਉਹ ਡਾਟਾ ਬਾਂਧ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਮਤਲਬ ਉਹ AngularJS ਮਾਡਲ ਦਾ ਹਿੱਸਾ ਹਨ ਅਤੇ ਉਹ AngularJS ਫੰਕਸ਼ਨਾਂ ਅਤੇ DOM ਵਿੱਚ ਹਵਾਲਾ ਦਿੱਤੇ ਜਾ ਸਕਦੇ ਹਨ ਅਤੇ ਅੱਪਡੇਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ。

ਉਹ ਪ੍ਰਮਾਣੀਕਰਣ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।ਉਦਾਹਰਣ: ਨਾਮ ਵਾਲਾ required ਗੁਣ ਦਾ <input> ਮੌਦਰਾ, ਜਦੋਂ ਉਹ ਖਾਲੀ ਹੋਵੇ, ਉਸ ਦੀ $valid ਸਥਿਤੀ ਇਸ ਨਾਲ ਸੈਟ ਕੀਤੀ ਜਾਵੇਗੀ false

ਉਹ ਵੀ ਸਥਿਤੀ ਕੰਟਰੋਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।AngularJS ਸਾਰੇ ਇਨਪੁਟ ਮੌਦਰੇ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਸੰਭਾਲਦਾ ਹੈ。

ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਹਰੇਕ ਸਥਿਤੀ ਹੈ:

  • $untouched ਇਹ ਫੀਲਡ ਟੱਚ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ
  • $touched ਇਹ ਫੀਲਡ ਟੱਚ ਕੀਤਾ ਗਿਆ ਹੈ
  • $pristine ਇਹ ਫੀਲਡ ਸੰਚਾਲਿਤ ਨਹੀਂ ਹੈ
  • $dirty ਇਹ ਫੀਲਡ ਸੰਚਾਲਿਤ ਹੋ ਚੁੱਕਾ ਹੈ
  • $invalid ਫੀਲਡ ਕੰਟੈਂਟ ਇਨਵਾਲਿਡ
  • $valid ਫੀਲਡ ਕੰਟੈਂਟ ਵਾਲਿਡ

ਹਰੇਕ ਸਥਿਤੀ ਦਾ ਮੁੱਲ ਇੱਕ ਬੋਲੀ ਦਾ ਮੁੱਲ ਹੈ, ਇਹ true ਜਾਂ false

ਉਦਾਹਰਣ

ਡਾਟਾ ਬਾਂਧ ਨਾਲ ਵਾਲੀ ਇਨਪੁਟ ਬਕਸਾ:

<input ng-model="myInput">
<p>ਇਨਪੁਟ ਬਕਸੇ ਦਾ ਮੁੱਲ ਇਹ ਹੈ:</p>
<h1>{{myInput}}</h1>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਸ਼ਾਸਤਰ

<input ng-model="name">

ਵਰਤੋਂ ਕਰਕੇ ng-model ਲੋੜ ਦੀ ਮੁੱਲ ਨਾਲ ਇਨਪੁਟ ਮੌਦਰੇ ਨੂੰ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ。

CSS ਵਰਗ

AngularJS ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਅੰਦਰ <input> ਇਲੈਕਟ੍ਰੌਨਿਕ ਮੌਦਰਾ ਦਾ ਇਲਾਕਾ ਮੌਜੂਦ ਹੈ. ਇਹ ਵਰਗ ਇਲੈਕਟ੍ਰੌਨਿਕ ਮੌਦਰੇ ਦੇ ਸਥਿਤੀ ਦੇ ਅਧਾਰ 'ਤੇ ਸਟਾਈਲ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ。

ਨਿਮਨਲਿਖਤ ਵਰਗ ਜੋੜੇ ਗਏ ਹਨ:

  • ng-untouched ਇਹ ਫੀਲਡ ਟੱਚ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ
  • ng-touched ਇਹ ਫੀਲਡ ਟੱਚ ਕੀਤਾ ਗਿਆ ਹੈ
  • ng-pristine ਇਹ ਫੀਲਡ ਸੰਚਾਲਿਤ ਨਹੀਂ ਹੈ
  • ng-dirty ਇਹ ਫੀਲਡ ਸੰਚਾਲਿਤ ਹੋ ਚੁੱਕਾ ਹੈ
  • ਫੀਲਡ ਕੰਟੈਂਟ ਵਾਲਿਡ ਫੀਲਡ ਕੰਟੈਂਟ ਵਾਲਿਡ
  • ਫੀਲਡ ਕੰਟੈਂਟ ਇਨਵਾਲਿਡ ਫੀਲਡ ਕੰਟੈਂਟ ਇਨਵਾਲਿਡ
  • ng-valid-key ਹਰ ਵਾਰ ਇੱਕ ਕੀ ਤਸਦੀਕ ਕਰੋng-valid-requiredਜਦੋਂ ਕਿਸੇ ਦੋ ਤੋਂ ਵੱਧ ਚੀਜ਼ਾਂ ਨੂੰ ਤਸਦੀਕ ਕਰਨਾ ਹੈ ਤਾਂ ਬਹੁਤ ਉਪਯੋਗੀ ਹੁੰਦਾ ਹੈ
  • ng-invalid-key ਉਦਾਹਰਣ:ng-invalid-required

ਜੇਕਰ ਵਰਗ ਦੀ ਹੱਦ ਦੀ ਮੁੱਲ ਹੈ falseਜੇਕਰ ਇਹ ਵਰਗ ਮਿਲਦੇ ਹਨ ਤਾਂ ਇਹ ਵਰਗ ਹਟਾਏ ਜਾਣਗੇ。

ਉਦਾਹਰਣ

ਸਟੈਂਡਰਡ ਸੀਐੱਸਐੱਸ ਦੀ ਮਦਦ ਨਾਲ ਪ੍ਰਮਾਣਿਕ ਅਤੇ ਗਲਤ ਇਨਪੁਟ ਅਣਪੂਰਣ ਐਲੀਮੈਂਟਾਂ 'ਤੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰੋ:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ