Ionic 2表單驗證問題與formGroup和ngModel

我試圖實施什麼似乎是一個簡單的形式驗證例程this walk-through我的離子2項目。Ionic 2表單驗證問題與formGroup和ngModel

在我的控制器的構造函數我用FormBuilder這樣做出formGroup：

this.form = formBuilder.group({ 
    date: ['', Validators.required], 
    client: ['', Validators.required] 
});

然後在模板我加formControllerName屬性相關內容是這樣的：

<ion-select formControlName="client" [(ngModel)]="clientId">

和綁定像這樣的「formGroup」的根元素：

<ion-content [formGroup]="form">

這失敗，出現以下錯誤消息：

ngModel不能使用與父 formGroup指令登記表單控件。請嘗試使用 formGroup的合作伙伴指令「formControlName」。例如：

<div [formGroup]="myGroup"> 
    <input formControlName="firstName"> 
</div> 

In your class: 

this.myGroup = new FormGroup({ 
    firstName: new FormControl() 
}); 

    Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions: 

    Example: 


<div [formGroup]="myGroup"> 
    <input formControlName="firstName"> 
    <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}"> 
</div>

正如所建議的錯誤信息，以及this StackOverflow thread我說[ngModelOptions]="{standalone: true}"到我的輸入，但它與其他錯誤消息回來：

模板解析錯誤：不能綁定到'ngModelOptions'，因爲它不是'離子選擇'的已知屬性。

來源

2017-03-08 Vahid

你爲什麼同時使用'formControlName'和'ngModel'？ – Amit

@Amit是否（formControlName）也做綁定？如果可以，請發表一個解釋我如何訪問綁定值的答案？ – Vahid

是的，我會:) – Amit

在angular2你可以選擇是使用「舊」（更多AngularJS-Y），模板驅動的方式，通過使用[(ngModel)]與您的組件變量創建雙向綁定：

組件：

private clientId: string;

模板：

<form> 
    <input [(ngModel)]="clientId" required /> 
</form>

如果我得到了事實一起，這將幕後的CR爲<form>元素提供了一個FormGroup實例，爲其中的每個輸入提供了一個FormControl實例。然後，所需的指令將對其應用驗證程序並觸發驗證（例如相應地應用有效/無效）。

使用這種方法，您可以簡單地使用clientId來獲取該值。

使用模型驅動（或「反應性」）方法是通過使用FormBuilder或簡單地創建FormGroup和FormControl的實例來定義表單的「模式」...

這將是這個樣子：

組件：

private form: FormGroup; 

ngOnInit() { 
    this.form = new FormGroup({ 
     clientId: new FormControl('', [Validators.required]) 
    }); 
}

模板：

<form [formGroup]="form"> 
    <input formControlName="clientId" /> 
</form>

在這種情況下，如果你想整個表格的價值，你會訪問(this.)form.value在這個例子中它將返回一個像這樣的對象：

{ clientId: "whatever" }

或者如果您只想要內部控件的值，請抓取(this.)form.controls['clientId'].value。

希望我做的事情更清晰，不是更糟:)

編輯： 採用後一種方法意味着你可以訪問FormControl的Observable，做一些有趣的事情，比如：

let debouncedInput$ = this.form.control['clientId'].valueChanges.debounceTime(1000);

來源

2017-03-08 08:20:11 Amit

你已經明確地說明了一切。非常感謝。 – Vahid

增加了一個更多的編輯，在我看來這是讓反應形式好得多的原因。 – Amit

我做了你所說的，但我現在得到這個錯誤：'沒有值的訪問器用於未指定名稱屬性的表單控件。任何機會，你也會知道這是什麼？ – Vahid

Ionic 2表單驗證問題與formGroup和ngModel

回答

相關問題