html - الزاوي 2 خانة اختيار ربط البيانات في اتجاهين




angular typescript (8)

أفضل شيء أكثر وضوحًا:

component.html

<input #saveUserNameCheckBox
    id="saveUserNameCheckBox" 
    type="checkbox" 
    [checked]="saveUsername" 
    (change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" />

component.ts

public saveUsername:boolean;

public onSaveUsernameChanged(value:boolean){
    this.saveUsername = value;
}

أنا جديد إلى حد ما على Angular2 ولدي مشكلة صغيرة:

في تسجيل الدخول الخاص بي ، مكون HTML ، لدي مربعي اختيار ، أريد ربطهما بطريقة ربط البيانات ثنائية الاتجاه ببرنامج تسجيل الدخول المكون للمكون.

هذا هو HTML:

<div class="checkbox">
<label>
    <input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Save username
</label>
</div>

وهذا هو المكون.

import { Component, OnInit }    from '@angular/core';
import { Router }               from '@angular/router';
import { Variables }            from '../../services/variables';

@Component({
    selector: 'login',
    moduleId: module.id,
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css']
})


export class LoginComponent implements OnInit {

    private saveUsername: boolean = true;
    private autoLogin: boolean = true;
    constructor(private router: Router, private variables: Variables) { }

    ngOnInit() { 
        this.loginValid = false;
        // Get user name from local storage if you want to save

        if (window.localStorage.getItem("username") === null) {
           this.saveUsername = true;
           this.autoLogin = true;
           console.log(this.saveUsername, this.autoLogin);
        } else {
           console.log("init", window.localStorage.getItem("username"));
        }
    }

    login(username: string, password: string, saveUsername: boolean, autoLogin: boolean) {
        this.variables.setUsername(username);
        this.variables.setPassword(password);
        this.variables.setIsLoggedIn(true);
        console.log(saveUsername, autoLogin);
        //this.router.navigate(['dashboard']);
    }

إذا قمت بالنقر فوق خانة اختيار ، فستحصل على القيمة الصحيحة في وحدة التحكم (مكون).

ولكن إذا قمت بتغيير قيمة على سبيل المثال saveUsername في المكون ، فلن "تحصل" خانة الاختيار على القيمة الجديدة.

لذلك لا يمكنني التعامل مع مربع الاختيار من المكون (مثل ما أريد القيام به في ngOnInit في المكون.

شكرا لمساعدتك!


أنا أعمل مع Angular5 واضطررت إلى إضافة السمة "name" للحصول على الربط للعمل ... "id" ليس مطلوبًا للربط.

<input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">

عند استخدام <abc [(bar)]="foo"/> بناء جملة على الزاوي.

هذا يترجم إلى: <abc [bar]="foo" (barChange)="foo = $event" />

مما يعني أن المكون الخاص بك يجب أن يكون:

@Input() bar;
@Output() barChange = new EventEmitter();

في أي حالة ، إذا كان عليك ربط قيمة بخانة ليست منطقية ، فيمكنك تجربة الخيارات أدناه

في ملف Html:

<div class="checkbox">
<label for="favorite-animal">Without boolean Value</label>
<input type="checkbox" value="" [checked]="ischeckedWithOutBoolean == 'Y'" 
(change)="ischeckedWithOutBoolean = $event.target.checked ? 'Y': 'N'">
</div>

في المكون ischeckedWithOutBoolean: any = 'Y';

انظر في stackblitz https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html


للأسف ، الحل المقدم منhakani ليس ملزماً في اتجاهين يتعامل فقط مع نموذج تغيير اتجاه واحد من جزء واجهة المستخدم / الواجهة الأمامية.

بدلا من ذلك بسيط:

<input [(ngModel)]="checkboxFlag" type="checkbox"/>

سوف تفعل في اتجاهين ملزمة لمربع الاختيار.

بعد ذلك ، عند تغيير checkboxFlag Model من جزء Backend أو UI - voila ، يخزن checkboxFlag حالة خانة الاختيار الفعلية.

للتأكد من قيامي بإعداد رمز الغطاس لتقديم النتيجة: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

لاستكمال هذه الإجابة ، يجب عليك تضمين عملية import { FormsModule } from '@angular/forms' في app.module.ts وإضافة إلى مجموعة الاستيراد ،

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

للحصول على مربع عمل ، يجب عليك اتباع جميع الخطوات التالية:

  1. استيراد FormsModule في الوحدة النمطية الخاصة بك
  2. ضع الإدخال داخل علامة form
  3. يجب أن تكون مدخلاتك هكذا:

    <input name="mpf" type="checkbox" [(ngModel)]="value" />

    ملاحظة: لا تنسى أن تضع اسمك في مدخلاتك.


يجب عليك إضافة السمة name="selected" إلى عنصر input .

فمثلا:

<div class="checkbox">
  <label>
    <input name="selected" [(ngModel)]="saveUsername.selected" type="checkbox">Save username
  </label>
</div>

يمكنك إزالة .selected من saveUsername في إدخال مربع الاختيار الخاص بك لأن saveUsername هو منطقي. بدلاً من [(ngModel)] استخدم [checked]="saveUsername" (change)="saveUsername = !saveUsername"

تحرير: الحل الصحيح:

<input
  type="checkbox"
  [checked]="saveUsername"
  (change)="saveUsername = !saveUsername"/>

تحديث: مثلnewman لاحظت عند استخدام ngModel في نموذج لن ينجح. ومع ذلك ، يجب عليك استخدام سمة [ngModelOptions] مثل (تم اختباره في Angular 7):

<input
  type="checkbox"
  [(ngModel)]="saveUsername"
  [ngModelOptions]="{standalone: true}"/> `

قمت أيضًا بإنشاء مثال في Stackblitz: https://stackblitz.com/edit/angular-abelrm





data-binding