คำถามติดแท็ก angular2-forms

สถานการณ์: กรุณาช่วย! ฉันกำลังพยายามทำสิ่งที่ควรเป็นรูปแบบที่ง่ายมากในแอป Angular2 ของฉัน แต่ไม่ว่ามันจะไม่ทำงาน รุ่น ANGULAR: เชิงมุม 2.0.0 Rc5 ข้อผิดพลาด: Can't bind to 'formGroup' since it isn't a known property of 'form' รหัส: มุมมอง: <form [formGroup]="newTaskForm" (submit)="createNewTask()"> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" required> </div> <button type="submit" class="btn btn-default">Submit</button> </form> ตัวควบคุม: import { Component } from '@angular/core'; …

806 angular  typescript  angular2-forms 

ข้อความแสดงข้อผิดพลาดผ้าสำลี: src / app / detail / edit / edit.component.ts [111, 5]: สำหรับคำสั่ง (... in ... ) ต้องถูกกรองด้วยคำสั่ง if ข้อมูลโค้ด (เป็นรหัสที่ใช้งานได้นอกจากนี้ยังมีให้ที่ส่วนการตรวจสอบความถูกต้องของแบบฟอร์ม angular.io ): for (const field in this.formErrors) { // clear previous error message (if any) this.formErrors[field] = ''; const control = form.get(field); if (control && control.dirty && !control.valid) { …

229 angular  angular2-forms  angular-cli  tslint 

ฉันยังคงได้รับข้อผิดพลาดนี้ในขณะที่ใช้งาน Angular2-Forms Framework ของ TypeScript: ไม่มีการdirectiveตั้งค่าเป็น "exportAs" เป็น "ngForm" นี่คือรหัสของฉัน โครงการพึ่งพา: "dependencies": { "@angular/common": "2.0.0-rc.6", "@angular/compiler": "2.0.0-rc.6", "@angular/core": "2.0.0-rc.6", "@angular/forms": "2.0.0-rc.6", "@angular/http": "2.0.0-rc.6", "@angular/platform-browser": "2.0.0-rc.6", "@angular/platform-browser-dynamic": "2.0.0-rc.6", "@angular/router": "3.0.0-rc.2", "ng2-bootstrap": "^1.1.1", "reflect-metadata": "^0.1.8", "core-js": "^2.4.0", "es6-module-loader": "^0.17.8", "rxjs": "5.0.0-beta.11", "systemjs": "0.19.27", "zone.js": "0.6.17", "jquery": "3.0.0", } และนี่คือเทมเพลตการเข้าสู่ระบบ: <form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)"> …

226 angular  typescript  forms  angular2-forms 

ฉันกำลังทำงานในแบบฟอร์มการเข้าสู่ระบบและหากผู้ใช้ป้อนข้อมูลประจำตัวที่ไม่ถูกต้องเราต้องการทำเครื่องหมายทั้งฟิลด์อีเมลและรหัสผ่านว่าไม่ถูกต้องและแสดงข้อความที่ระบุว่าการเข้าสู่ระบบล้มเหลว ฉันจะตั้งค่าฟิลด์เหล่านี้ว่าไม่ถูกต้องจากการติดต่อกลับที่สังเกตได้ได้อย่างไร แม่แบบ: <form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm"> <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch"> <md-input-container> <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"> </md-input-container> <md-input-container> <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password"> </md-input-container> <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p> <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center"> <md-checkbox class="remember-me">Remember Me</md-checkbox> <a class="forgot-password" routerLink='/forgot-password'>Forgot …

190 validation  angular  angular2-forms 

ฉันกำลังพยายามใช้ Dynamic Forms ใน Angular 2 ฉันได้เพิ่มฟังก์ชั่นเพิ่มเติมเช่น Delete และ Cancel ไปยังแบบฟอร์มไดนามิก ฉันได้ทำตามเอกสารนี้: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html ฉันได้ทำการเปลี่ยนแปลงรหัส ฉันพบข้อผิดพลาดที่นี่ ฉันจะทำให้ข้อผิดพลาดนี้เกิดขึ้นได้อย่างไร คุณสามารถค้นหารหัสเต็มได้ที่นี่: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=previewซึ่งทำงานในเครื่องอัดเสียง แต่ไม่ใช่ในระบบท้องถิ่นของฉัน รหัส Html: <div> <form [formGroup]="form"> <div *ngFor="let question of questions" class="form-row"> <label [attr.for]="question.key">{{question.label}}</label> <div [ngSwitch]="question.controlType"> <input *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" [(ngModel)]="question.value"> <select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" > <option *ngFor="let opt of …

178 forms  angular  angular2-template  angular2-forms 

ฉันได้อ่านเกี่ยวกับ Angular2 Forms API ใหม่และดูเหมือนว่ามีสองวิธีในแบบฟอร์มหนึ่งคือแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลตอื่น ๆ เป็นแบบโต้ตอบหรือแบบที่ขับเคลื่อนด้วยแบบจำลอง ฉันต้องการทราบความแตกต่างในทางปฏิบัติระหว่างทั้งสองไม่ใช่ความแตกต่างในไวยากรณ์ (ชัด) แต่ใช้จริงและวิธีการที่เป็นประโยชน์มากขึ้นในสถานการณ์ที่แตกต่างกัน นอกจากนี้ยังมีการเพิ่มประสิทธิภาพการทำงานในการเลือกหนึ่งมากกว่าอีก และถ้าใช่ทำไม

157 angular  angular2-forms 

ฉันสังเกตเห็นว่าถ้าฉันปิดใช้งานตัวควบคุมในรูปแบบปฏิกิริยา Angular 2 ตัวควบคุมจะไม่รวมอยู่ใน form.value ตัวอย่างเช่นหากฉันกำหนดแบบฟอร์มของฉันดังนี้: this.notelinkingForm = new FormGroup({ Enabled: new FormControl(settings.Enabled, Validators.required), LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required), LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required) }); และตรวจสอบ this.notelinkingForm.value หากเปิดใช้งานการควบคุมทั้งหมดเอาต์พุตจะเป็น: {"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"} อย่างไรก็ตามเมื่อปิดใช้งานการควบคุมบางส่วนจะเป็น: {"Enabled":true} สังเกตว่ามีการยกเว้นการควบคุมที่ปิดใช้งานอย่างไร จุดประสงค์ของฉันคือเมื่อแบบฟอร์มเปลี่ยนแปลงฉันต้องการให้สามารถส่ง form.value พร้อมคุณสมบัติทั้งหมดในนั้นออกไปยัง API ที่เหลือของฉัน สิ่งนี้จะเป็นไปไม่ได้อย่างชัดเจนหากไม่มีรายการที่ปิดใช้งาน ฉันพลาดอะไรบางอย่างที่นี่หรือนี่คือพฤติกรรมที่คาดไว้? มีวิธีบอกให้ Angular รวมรายการที่ปิดใช้งานใน form.value …

114 angular  angular2-forms 

ฉันรู้ว่าในangular2ฉันสามารถปิดการใช้งานปุ่มที่มี [disable]แอตทริบิวต์ตัวอย่างเช่น: <button [disabled]="!isValid" (click)="onConfirm()">Confirm</button> แต่ฉันสามารถทำได้โดยใช้[ngClass]หรือ[ngStyle]? ชอบมาก: <button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button> ขอบคุณ.

113 html  angular  angular2-template  angular2-forms 

ฉันใช้วัสดุที่ 2 md-raised-buttonการเพิ่ม ฉันต้องการใช้คำสั่งนี้ก็ต่อเมื่อเงื่อนไขบางอย่างกลายเป็นจริง ตัวอย่างเช่น: <button md-raised-button="true"></button> อีกตัวอย่างหนึ่ง: ฉันสร้างรูปแบบปฏิกิริยาไดนามิกพื้นฐานใน plunker ฉันใช้formArrayNameคำสั่งของรูปแบบปฏิกิริยาสำหรับอาร์เรย์ของการควบคุม ฉันต้องการใช้formArrayNameคำสั่งเฉพาะในกรณีที่เงื่อนไขเฉพาะกลายเป็นจริงมิฉะนั้นอย่าเพิ่มformArrayNameคำสั่ง นี่คือการเชื่อมโยง plunker

112 angular  angular-material  angular2-forms  angular2-directives  angular-material2 

ฉันใช้ RC4 และฉันได้รับข้อผิดพลาดไม่มีคำสั่งที่ตั้งค่า "exportAs" เป็น "ngForm"เนื่องจากแม่แบบของฉัน: <div class="form-group"> <label for="actionType">Action Type</label> <select ngControl="actionType" ===> #actionType="ngForm" id="actionType" class="form-control" required> <option value=""></option> <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}"> {{ actionType.label }} </option> </select> </div> boot.ts: import {disableDeprecatedForms, provideForms} from '@angular/forms'; import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS, Http} from '@angular/http'; import …

109 angular  typescript  angular2-forms 

ด้วยรายการของช่องทำเครื่องหมายที่ผูกไว้กับช่องเดียวกันformControlNameฉันจะสร้างอาร์เรย์ของค่าช่องทำเครื่องหมายที่ผูกไว้กับformControlแทนที่จะเป็นเพียงtrue/ false? ตัวอย่าง: <form [formGroup]="checkboxGroup"> <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" /> <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" /> <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" /> </form> checkboxGroup.controls['myValues'].value ปัจจุบันผลิต: true or false สิ่งที่ฉันต้องการให้ผลิต: ['value-1', 'value-2', ...]

109 javascript  angular  checkbox  angular2-forms 

ดูเหมือนจะแก้ไขข้อผิดพลาดนี้ไม่ได้ ฉันมีแถบค้นหาและ ngFor ฉันกำลังพยายามกรองอาร์เรย์โดยใช้ไปป์ที่กำหนดเองดังนี้: import { Pipe, PipeTransform } from '@angular/core'; import { User } from '../user/user'; @Pipe({ name: 'usersPipe', pure: false }) export class UsersPipe implements PipeTransform { transform(users: User [], searchTerm: string) { return users.filter(user => user.name.indexOf(searchTerm) !== -1); } } การใช้งาน: <input [(ngModel)]="searchTerm" type="text" placeholder="Search users"> <div …

106 angular  angular2-forms  angular2-pipe 

ฉันใช้ReactiveFormsModuleAngular2 เพื่อสร้างส่วนประกอบที่มีฟอร์ม นี่คือรหัสของฉัน: foo.component.ts : constructor(fb: FormBuilder) { this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [] }); } foo.component.html (ด้วย[formControl]): <div class="fields"> <div class="field"> <label>Fullname*</label> <input type="text" [formControl]="myForm.controls.fullname"/> </div> </div> <div class="inline fields"> <label for="gender">Gender</label> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> <label>Male</label> </div> …

99 angular  radio-button  angular2-forms  form-control  angular2-formbuilder 

FormGroup : FormGroupรวบรวมค่านิยมของเด็กแต่ละ FormControl เป็นหนึ่งวัตถุที่มีชื่อการควบคุมแต่ละเป็นกุญแจสำคัญใน const form = new FormGroup({ first: new FormControl('Nancy', Validators.minLength(2)), last: new FormControl('Drew') }); FormArray : FormArrayมวลรวมค่าของแต่ละ FormControl เด็กเป็นอาร์เรย์ const arr = new FormArray([ new FormControl('Nancy', Validators.minLength(2)), new FormControl('Drew') ]); ควรใช้เมื่อใด

96 angular  angular2-forms  angular-reactive-forms 

ดังนั้นฉันจึงมีรูปแบบที่ซับซ้อนสำหรับสร้างเอนทิตีและฉันต้องการใช้เพื่อแก้ไขเช่นกันฉันใช้ API รูปแบบเชิงมุมใหม่ ฉันจัดโครงสร้างแบบฟอร์มให้ตรงกับข้อมูลที่ฉันดึงมาจากฐานข้อมูลดังนั้นฉันจึงต้องการกำหนดค่าของแบบฟอร์มทั้งหมดให้กับข้อมูลที่ดึงมาที่นี่เป็นตัวอย่างของสิ่งที่ฉันต้องการทำ: this.form = builder.group({ b : [ "", Validators.required ], c : [ "", Validators.required ], d : [ "" ], e : [ [] ], f : [ "" ] }); this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data}); PS: NgModel ใช้ไม่ได้กับ API รูปแบบใหม่และฉันไม่รังเกียจที่จะใช้การผูกข้อมูลทางเดียวในเทมเพลตเช่นเดียวกับใน <input formControlName="d" value="[data.d]" /> ที่ใช้งานได้ แต่จะเป็นความเจ็บปวดในกรณีของอาร์เรย์

93 angular  angular2-forms